I am facing an issue with two elements that are set to a fixed position on the page. When these elements reach the bottom of the page, I want them to revert back to a static position using JavaScript.
The problem occurs when trying to scroll by clicking and dragging the scrollbar. If you scroll all the way to the bottom and then attempt to drag the scrollbar upwards, it flickers and prevents me from scrolling smoothly.
You can view the code in action on JSFiddle
HTML
<header>This is the header</header>
<main>
<div id="content"></div>
<section id="fixed-elements">
<div id="fix1">Fixed Footer2</div>
<div id="fix2">Fixed Footer1</div>
</section>
</main>
<footer>This is the footer</footer>
Javascript
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
$('#fixed-elements').css({
'position': 'static',
'bottom': 'auto',
});
} else {
$('#fixed-elements').css({
'position': 'fixed',
'bottom': '0',
});
}
});
});
CSS
footer, header {
background-color:green;
}
#content {
height:1000px;
}
#fixed-elements {
position:fixed;
bottom:0;
overflow:hidden;
}
What could be causing this issue? And is there a solution to fix it? (Similar problems may arise when attempting to scroll using the middle mouse click).