I have a fixed element that attaches to my page when you reach it in a scroll. This element can sometimes contain content above it, but not below it, that is, the page depth may not be deep enough to support this behavior, because of this it does not allow the user to reach the bottom of the page and causes a page bounce, presumably because it removes the item from the scroll when it corrects, which causes the condition in the scroll event function to no longer be true. Gif shows an undesirable effect when this happens.
Demonstrated here in this script: https://jsfiddle.net/dcsjx625/8/
Pages are dynamic, so removing the effect for one page is not possible.
<body>
<div class="header">
<img src="http://placehold.it/600x401">
</div>
<div class="content-parent">
<div class="content">
<img src="http://placehold.it/600x400">
<img src="http://placehold.it/600x400">
<img src="http://placehold.it/600x400">
</div>
</div>
<div class="footer-content">
Footer
</div>
</body>
JQuery
var $stickyChainOffset = $('.content').offset();
var $stickyChain = $('.content');
var $fixedWidth = $('.content').parent().width();
function checkScroll() {
if ($(window).scrollTop() > $stickyChainOffset.top - 100) {
$stickyChain.css('position', 'fixed').css('top', '100px').css('max-width', $fixedWidth);
} else {
$stickyChain.css('position', 'static').css('max-width', 'initial');
}
};
$(window).scroll(function() {
checkScroll();
});
$(window).resize(function() {
$fixedWidth = $('.content').parent().width();
$(window).scroll();
});
Ideally, I want to prevent the sticking effect if the element is close enough to the bottom of the page, which may cause a problem.
I tried to calculate the page depth by the height of the element in the function checkScroll()like that, but even this does not work. I feel like I'm on the verge of solving this .:
function checkScroll() {
height = $stickyChain.height() + 100;
depth = $(document).height() - $stickyChainOffset.top;
if ($(window).scrollTop() > $stickyChainOffset.top - 100 && depth > height) {
$stickyChain.css('position', 'fixed').css('top', '100px').css('max-width', $fixedWidth);
} else {
$stickyChain.css('position', 'static').css('max-width', 'initial');
}
};
Any help would be greatly appreciated!