I have a header and footer script here but when I scroll back up on IOS there is the scroll bouncing and it records last scroll as a down scroll and hides my header ( important to be shown at top = 0).
What to do to give that condition to overrides this script?
jQuery.event.special.touchstart = {
setup: function(_, ns, handle) {
this.addEventListener('touchstart', handle, {
passive: !ns.includes('noPreventDefault')
});
}
};
jQuery.event.special.touchmove = {
setup: function(_, ns, handle) {
this.addEventListener('touchmove', handle, {
passive: !ns.includes('noPreventDefault')
});
}
};
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.querySelector(".header").style.top = "0";
document.querySelector(".navicon").style.top = "8px";
document.querySelector(".groupticket").style.top = "6px";
document.querySelector(".search").style.top = "14px";
document.querySelector(".foot").style.bottom = "0px";
document.querySelector(".filter").style.top = "-50px";
} else {
document.querySelector(".header").style.top = "-86px";
document.querySelector(".navicon").style.top = "8px";
document.querySelector(".groupticket").style.top = "6px";
document.querySelector(".search").style.top = "14px";
document.querySelector(".foot").style.bottom = "-201px";
document.querySelector(".filter").style.top = "0px";
}
prevScrollpos = currentScrollPos;
}
I added this but it seems to mess with the script:
var idVar = setTimeout() => {
onscroll()
}, 1000);
This code uses a function that is listening "scroll" on the page and after 2 seconds executes the command. I did the same script for the footer as well:
var isScrolling;
navbar = document.getElementById("header");
window.addEventListener('scroll', () => {
header.style.top = "-50px" + header.style.height;
window.clearTimeout(isScrolling);
isScrolling = setTimeout(function() {
header.style.top = "0";
}, 2000);
}, false);