Tengo un javascript para contraer un encabezado cuando el usuario se desplaza hacia abajo en la página, y para volver a expandirlo si se desplaza hacia la parte superior. Funciona bien para un desplazamiento fuerte y decisivo. Pero si un usuario hace una pausa en o cerca del activador pageYOffset, el encabezado 'parpadea', porque el script elimina y agrega la clase 'page-scrolled' una y otra vez.

¿Tal vez necesito un oyente de clase para apagar temporalmente el script? Pero, en una versión anterior de la secuencia de comandos donde agregué un oyente, la secuencia de comandos solo se activó una vez. Si el usuario se desplazó hacia atrás en la página, la clase 'page-scrolled' no se eliminó si el usuario se desplazó hacia atrás, porque el script ya no estaba escuchando. Como no estoy muy versado en javascript, no estoy seguro de cómo resolver esto, o si mi sintaxis y ubicación son correctas. ¿Cuál es la mejor solución?

Esto es lo que tengo:

 function scrollShrink() { var elementTarget = document.querySelector('.header'); if(window.pageYOffset >= 20) { document.querySelector('.header').classList.add('page-scrolled'); // Below 'remove' line didn't work - stops function entirely, which isn't wanted. // document.removeEventListener('scroll', scrollShrink); } else { document.querySelector('.header').classList.remove('page-scrolled'); } }; document.addEventListener('scroll', scrollShrink);