Quiero agregar un evento de desplazamiento al objeto de la ventana para mostrar el encabezado al desplazarse hacia arriba y ocultarlo al desplazarse hacia abajo, pero solo después de que todo esté cargado.
El problema que tengo es que cuando actualizo la página, a veces se agrega la hide de clase al encabezado, pero no debería ser así. ¿Cómo puedo resolver el problema? Aquí está el código:
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; }; });Eso sucede porque en la carga la condición es falsa. Así se llama la parte else. Querrías usar un else if para evitar esto. Al igual que:
document.addEventListener('DOMContentLoaded', () => { window.onscroll = function (e) { if (this.oldScroll > this.scrollY) { header.classList.remove('hide'); } else if (this.oldScroll < this.scrollY) { header.classList.add('hide'); } this.oldScroll = this.scrollY; }; });