Menu
I've got a div which I need to be fixed to the bottom of the screen, until it reaches some point after scrolling and stop there and stay. If a user start scrolling back up - make it fixed again after passing that same point.
Any ideas on how this can be accomplished?
EDIT: (here's my current code which doesn't work)
$(window).scroll(function () {
if ($(this).scrollTop() < $(document).height() - 81) {
$('#bottom_pic').css('bottom', "0px");
}
else {
$('#bottom_pic').css('bottom', "81px");
}
});
CSS:
#bottom_pic
{
position: fixed;
bottom: 0px;
}
Thanks!
237
If you have two elements in your HTML and you want to :hover over one and target a style change in the other the two elements must be directly related--parents, children or siblings. This means that the two elements either must be one inside the other or must both be contained within the same larger element.
Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper's page box.
To create a fixed top menu, use position:fixed and top:0 . Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.
Fixed positioning This can be used to create a "floating" element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport.
jQuery Waypoints is an excellent plugin to achieve things like this: Demo of fixed div after scrolling
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
