No encontré la respuesta exacta a mi problema que explicaré aquí:
Quiero ocultar un elemento fijo cuando el usuario se desplaza. Cuando finaliza la acción de desplazamiento, se vuelve a mostrar el div. Esto no tiene en cuenta un disparador en la altura (con un scrollTop por ejemplo) sino simplemente en la propia acción de desplazamiento.
Este comportamiento es para uso móvil.
Hice un fragmento de código rápido para probar algo:
muchas gracias
window.addEventListener('scroll', function() { document.getElementById('paragraph').classList.toggle('test'); }); p { position:fixed; background:wheat; } div { height:2000px; background-image: linear-gradient(red, yellow); } <div> <p id="paragraph">Has to be hidden on scroll</p> </div>Cuando se activa la función de desplazamiento, ocultaremos el div y luego debemos verificar si el desplazamiento se detiene para esto, podemos usar la función setTimeout
window.addEventListener("scroll", function () { $("#paragraph").fadeOut(); //hide div document.getElementById("paragraph").classList.toggle("test"); clearTimeout($.data(this, 'scrollTimer')); $.data(this, 'scrollTimer', setTimeout(function() { $("#paragraph").fadeIn(); //unhide div after few milliseconds }, 550)); });Aquí hay una solución que he usado en el pasado:
https://codepen.io/webdevjones/pen/GRybONR
//initialize scrollTimer let scrollTimer = -1; //add event listner window.addEventListener("scroll", () => { //get the element(s) to hide while scrolling const elem = document.getElementById('paragraph') //hide the element(s), you could also just use opacity //or visibility depending on your use case elem.style.display = 'none' //while we are scrolling, restart the timer if (scrollTimer != -1){ clearTimeout(scrollTimer) } //if the timer isnt cleared, we run the function to //display the element(s) again scrollTimer = window.setTimeout(() => { elem.style.display = 'block' }, 1); //running the function 1ms after scroll stop, //you could increase this number if neccesary })