¿Hay alguna manera de mostrar una imagen o un div cuando se desplaza hacia abajo en una página web y ocultarla cuando no se desplaza y viceversa?
Entonces, en el código a continuación, el div rojo se mostraría cuando no se esté desplazando, y el div verde se mostraría solo cuando se esté desplazando.
.square { position: fixed; width: 100px; height: 100px; } .green { background: green; display: none; } .red { background: red; } .container { width: 100%; height: 3000px; } <div class="container"> <div class="square green"></div> <div class="square red"></div> </div>El objetivo final es lograr algo como esto: https://mailchimp.com/annual-report/ donde el personaje parece estar caminando cuando el usuario se desplaza y se queda quieto cuando el usuario se detiene. ¿Es esto fácilmente alcanzable?
Solo necesita un eventListener que escuche un evento de scroll . Sin embargo, esto tiene el problema de que solo reconoce cuando se desplaza, pero no cuando deja de desplazarse. Para eso, puede usar esta respuesta que explica cómo escuchar una "parada de desplazamiento"
Para que el código sea más breve y sencillo, eliminé la display: none del cuadro verde. Agregué una nueva clase d-none que contiene esta propiedad ahora. Por defecto se añade al cuadro verde.
Con classList.toggle('d-none') puedo alternar la clase dentro de ambos cuadros, lo que hace que sea más fácil abordar y luego agregar o eliminar la clase para cada cuadro por sí solo.
var timer = null; var box = document.querySelectorAll('.square'); window.addEventListener('scroll', function() { if (timer !== null) { clearTimeout(timer); } else { box.forEach(el => el.classList.toggle('d-none')); } timer = setTimeout(function() { box.forEach(el => el.classList.toggle('d-none')); }, 150); }, false); .d-none { display: none; } .square { position: fixed; width: 100px; height: 100px; } .green { background: green; /* display: none; */ /* removed */ } .red { background: red; } .container { width: 100%; height: 3000px; } <div class="container"> <div class="square green d-none"></div> <div class="square red"></div> </div>