I am experiencing an issue with an element that is supposed to become fixed when scrolling past 145px and then unfixed when scrolling back up. While this functionality works smoothly on desktops, there seems to be a delay on mobile devices, particularly on Android. On Android, the fixed element remains in place all the way to the top of the page before the browser realizes it should no longer be fixed.
How can I eliminate this delay?
Using jQuery
$(window).scroll(function () {
if ($(this).scrollTop() > 145) {
if ($("#latestWrapper").css('position') !== 'fixed') {
$("#latestWrapper").css("position", "fixed");
$("#latestWrapper").css("top", "0px");
}
} else {
if ($("#AddFixedLatest").css('position') !== 'static') {
$("#latestWrapper").css("position", "absolute");
$("#latestWrapper").css("top", "145px");
}
}
});
CSS Solution
div#latestWrapper {
height:50px;
top:145px;
width:100%;
pointer-events:none;
text-align:left;
z-index:1;
position:absolute;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
Your assistance in resolving this issue would be greatly appreciated.