Good day everyone. I am trying to switch my div into a fixed one at the bottom when it appears on screen when both scrolling up and down.
I found this stack overflow topic which does the thing I'm attepting to do but at top HERE.
Code:
var fixmeTop = $('.fixme').offset().top; // get initial position of the element
$(window).scroll(function() { // assign scroll event listener
var currentScroll = $(window).scrollTop(); // get current position
if (currentScroll >= fixmeTop) { // apply position: fixed if you
$('.fixme').css({ // scroll to that element or below it
position: 'fixed',
top: '0',
left: '0'
});
} else { // apply position: static
$('.fixme').css({ // if you scroll above it
position: 'static'
});
}
});
After many try and many articles red, I just can't manage to tweak it to be fixed at the bottom (kind of new to javascript). So I am please asking for your help.
Hey you can do it like this
const heightOfText = 15
if (currentScroll >= fixmeTop - $(window).height() + heightOfText) {
$('.fixme').css({
position: 'fixed',
bottom: '0',
left: '0'
});
}
So when you see your .fixme
at the bottom of the text it attaches to the bottom with bottom: '0'
. Let me know if it helps.
You could use position: sticky
/*QuickReset*/ *{margin:0;box-sizing:border-box;}.content { min-height: 200vh; border: 4px dashed #000; }.sticky-bottom { position: sticky; bottom: 0; padding: 2em 0; background: #0bf; }
<div> <div class="content"> 1. Lorem ut florem... </div> </div> <div> <div class="content"> 2. Lorem ut florem... </div> <div class="sticky-bottom">Stick me when in viewport</div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.