I am interested in implementing a scroll event to the window object that will display the header when scrolling up and hide it when scrolling down, but only after everything has finished loading.
However, I am encountering an issue where sometimes the hide class is added to the header when I refresh the page, even though it shouldn't be. How can I go about resolving this problem?
Below is the code snippet:
document.addEventListener('DOMContentLoaded', () => {
window.onscroll = function (e) {
if (this.oldScroll > this.scrollY) {
header.classList.remove('hide');
} else {
header.classList.add('hide');
}
this.oldScroll = this.scrollY;
};
});