I am creating a page I need help with, I have the HTML and CSS ready, all I want is to make the element come to the top after I scroll down a bit, and there have to be more than 5 screens than I need to come to top as I keep scrolling
I can't find a solution so need help
Here's a link of what I need, this is exactly what I want
https://www.blackrock.com/corporate#intro
CSS
The CSS property you need is position: sticky means that this element would be in it's respective relative position until you scroll down enough and it reached the top (if you set its top: 0) and would then "stick" to the top as if it instantly changed it's position to position: fixed. Enjoy
The following code could help you achieve your desired behavior:
.sticky-container {
position: sticky;
top: 0;
left: 0;
}
If it is a container that takes up the entire width then also add width: 100% and a certain fixed height in pixels to see the container.
If you want to have the element stay in a certain position in default when the user just entered the website you probably would need position: fixed instead of sticky. You could take a look at a similar solution for position fixed here with a demo
Related
I have what seemed like a simple issue but cant quite figure this one out. I am using bootstrap version 3 to create my base layout. I have a footer that needed to be at the bottom of the page so i made it position: absolute; bottom: 0; and worked fine if I zoom out. When the content start getting lengthy it creates the vertical scroll bar and when scrolling the DIV floats around instead of staying at the bottom.
I tried giving the container a position: relative; but dosent seem to do anything. Would anyone have any ideas?
Heres an example of my layout, if you resize the preview section to force the vertical scroll bar you will see that when you scroll the DIV floats around instead of staying in place.
https://jsfiddle.net/DTcHh/10301/
try with fixed
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
js fiddle example
non-fixed, see the below:
your problem is (from what I gather) the footer is floating dependent on the content and and you want it to stay put where you call it.
.footerElement {
// base styles all styles
display: inline-block; // add this, does as you imagine
}
"Displays an element as an inline-level block container. The inside of
this block is formatted as block-level box, and the element itself is
formatted as an inline-level box" -W3schools
scrollbar, see the below:
As for the element that has a scrollbar resolving.
.elementwithScrollbar {
// base styles all styles
overflow:hidden; // or use overflow-y:hidden; or x
}
fixed, see the below:
If you want it to be fixed; adding position: fixed; and the value coordinates should all you have to do there. (ie. position:fixed; and where you want it)
"Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page." -MDN
Using fixed only anchors it to the bottom of the screen regardless of which part of the page you are viewing. I think you want to have the footer at the bottom of the page rather than constantly sitting at the bottom of the screen.
To fix, amend your spelling mistake here:
.contrainer-fluid { <-- should be container
position: relative;
}
I need to list the thumbnail images on a page, all of which have fixed height and width. Once I hover any of them, I want the larger image display at a fixed position, i.e. top:50px and left:50px within its wrapper. The size of the larger image is also fixed, i.e. width:100px, and height: 100px.
I followed the instruction on
http://cssdemos.tupence.co.uk/image-popup.htm
but I could not figure out to put the larger image at a fixed position.
I would appreciate if you could help me in this
Thanks,
Position fixed, places the image(element) an amount of pixels based on the whole window. Not to the wrapper.
Position absolute places the image an amount of pixels based on its wrapper.
So try adding this.
.larger-image {
position: absolute;
top: 50px;
left: 50px;
}
If for some reason it doesn't work, please post your relevant code.
http://jsfiddle.net/9fCfE/1/
.fixed {
width: inherit;
height: 95%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
}
footer {
width: 100%;
}
Fixed div must be always on top and shouldn't cover the footer when I scroll.
100% height or from top to footer.
How can I do it?
The simplest answer is to drop the z-index of the fixed region so that when it would otherwise cover the footer, it instead moves behind it. You'll need to make sure the footer is position: relative;.
Fiddle example
If, instead, you want the two to never intersect, you're in for a harder challenge.
The best way to do it would to be giving your fixed element a fixed height, giving your footer a fixed height, and making sure that the fixed element height + the footer height <= the screen height.
Fiddle example
Those are really your only options - you essentially have to design around it. To the best of my knowledge, there is no way to dynamically shrink the fixed element when it intersects with other elements on the page (ignoring the rest of the elements on the page is the purpose of position: fixed, after all).
I've cobbled together a quick and dirty implementation of what you asked using jQuery, offset(), scrollTop() and height()
Here's the jsfiddle example.
Is this what you wanted? If so - why? :)
I don't see any visual difference between this method, and the one where the fixed element goes under the footer.
I need an div that will be always at the bottom of the page, margin 172px at the left, and 383px at the right.
This div will have some images and text and left and right buttons. When you hover the mouse at the right button, for example, the content that was "invisible", after reaching the div's width limit, will start appearing from the right, sliding the content for the left.
I tried using position:fixed; bottom:0px, but I couldn't margin the div, and the width of it doesn't change when the screen size changes...
For example, this would be exactly what I want (the black div at the bottom):
If you know any jquery plugin that does what I want or if you know how to do something like this, please help me!
If you're using position: fixed, margin can not be applied. You can specify the left and right attributes though.
position: fixed;
right: 383px;
bottom: 0;
left: 172px;
I know it's not exactly what you're asking for, but you can then set the white-space and overflow attributes on that div to make it so that it will show a horizontal scrollbar.
white-space: nowrap;
overflow: auto;
The user would use the scrollbar on the bottom to move the content of the div. Here's an example: http://jsfiddle.net/rustyjeans/5nv84/
To use jQuery set overflow: hidden and add some functions that adjust the scrollLeft of the div, then add some controls that call those functions when they're hovered. Here's an example: http://jsfiddle.net/rustyjeans/FtSGn/
This shouldn't be too hard to do. You want a containing div that has the dimensions of the viewer. Then, have a div inside that one, with position absolute and dimensions that extend beyond the viewer in width. When the arrows are hovered over use jquery to change the "left" css property of the inner div. Did that help?
EDIT:
The outer div should have "position: relative;" to insure that the inner div is positioned relative to its margins.
I have two divs whose widths are controlled by percentages. I want the right div to be exactly as tall as the left div, which expands and shrinks based on the width of the image it contains and the width of the browser window.
Is there a way to accomplish this without javascript?
http://jsfiddle.net/5JU2t/
The simplest way to achieve this is to make the .right div absolutely positioned and setting top and bottom to 0.
Just remember to position the parent (.main) div relatively and remove all of the floats:
.right {
bottom:0;
position: absolute;
right:0;
top: 0;
}
.main {
position: relative;
}
Working example: http://jsfiddle.net/5JU2t/1/
Note
The reason the right column is a little longer in the example is due to the white space added under an image. Should you only be using an image in this column then you can add float: left to the image to resolve this:
Working example: http://jsfiddle.net/5JU2t/2/
I'd try wrapping it in a third div and give your two divs either height:auto or height: 100%.
Set the parent (.main) to display as table
and set the children (.right, .left) to display as table cell.
I would say funk all the extra css and use a table layout