Make content sticky on scroll to a point in jQuery
26,933
Add following condition to your if
statement:
$(".blue").height() + $(".blue").offset().top > windowTop
Your code should look like this:
$(document).ready(function() {
var stickyTop = $('.sticky').offset().top;
$(window).scroll(function() {
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop && $(".blue").height() + $(".blue").offset().top - $(".sticky").height() > windowTop) {
$('.sticky').css('position', 'fixed');
} else {
$('.sticky').css('position', 'relative');
}
});
});
See updated JSFiddle.
Author by
Julesfrog
Updated on February 14, 2020Comments
-
Julesfrog about 4 years
I have a
div
that's set toposition: relative
. It becomesfixed
when the top of the window reaches it. The div lives in a container (blue in the example below) and I would like to set it back torelative
when it reaches the bottom of its parent container (blue).This is my code simplified and my Fiddle:
HTML:
<div class="green"></div> <div class="blue"> <div class="sticky">Sticky</div> </div> <div class="red"></div>
CSS:
.blue { background-color: blue; height: 500px; } .sticky { width: 200px; background-color: yellow; text-align: center; top: 0; } .red { background-color: red; height: 800px; } .green { background-color: green; height: 200px; }
And the jQuery:
$(document).ready(function() { var stickyTop = $('.sticky').offset().top; $(window).scroll(function() { var windowTop = $(window).scrollTop(); if (stickyTop < windowTop) { $('.sticky').css('position', 'fixed'); } else { $('.sticky').css('position', 'relative'); } }); });