Question

0

274

Vistas

Mostrar div basado en desplazamiento hacia arriba y div desde la posición actual

Estoy trabajando en una aplicación pequeña.

quiero mostrar el div si el usuario se desplaza hacia arriba a> 100px desde la posición actual
y ocultar div si el usuario se desplaza hacia abajo a> 50 px desde la posición actual

código de ejemplo

 myID = document.getElementById("myID"); var myScrollFunc = function() { var y = window.scrollY; if (y >= 200) { myID.className = "bottomMenu show" } else { myID.className = "bottomMenu hide" } }; window.addEventListener("scroll", myScrollFunc);

 body { height: 2000px; } .bottomMenu { position: fixed; bottom: 0; width: 100%; height: 60px; border-top: 1px solid #000; background: red; z-index: 1; transition: all 1s; } .hide { opacity: 0; left: -100%; } .show { opacity: 1; left: 0; }

 <div id="myID" class="bottomMenu hide"></div>

¿alguien puede ayudar con el código en javascript?

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-04T04:31:51.636Z

Encontré la manera de resolver esto

primero queremos obtener la dirección de desplazamiento
y crea dos contadores 1. contador ascendente 2. contador descendente
y si comenzamos a desplazarnos hacia arriba, aumente el contador ascendente y establezca el contador descendente en 0
y si comenzamos a desplazarnos hacia abajo, aumentamos el contador regresivo y configuramos el contador a 0
si el valor del contador ascendente alcanza su valor, por ejemplo, si llega a 100, muestre el div
y si el contador descendente alcanza su valor, por ejemplo, si llega a 50, oculta el div

ejemplo de código

 myID = document.getElementById("myID"); function showSmartMenu() { // current scroll position var st = window.pageYOffset || document.documentElement.scrollTop; // scrolling up if (st < lastScrollTop) { upCounter += 1; downCounter = 0; if (upCounter == 100) { myID.className = "bottomMenu show" } } else { // scrolling down downCounter -= 1; upCounter = 0; if (downCounter == -50) { myID.className = "bottomMenu hide" } } lastScrollTop = st <= 0 ? 0 : st; } var lastScrollTop = 0; var upCounter = 0 var downCounter = 0 window.addEventListener("scroll", showSmartMenu)

 body { height: 2000px; } .bottomMenu { position: fixed; bottom: 0; width: 100%; height: 60px; border-top: 1px solid #000; background: red; z-index: 1; transition: all 1s; } .hide { opacity: 0; left: -100%; } .show { opacity: 1; left: 0; }

 <div id="myID" class="bottomMenu hide"></div>

0

274

Mostrar div basado en desplazamiento hacia arriba y div desde la posición actual

1 Respuestas

0

Encuentra empleos remotos

Andres GPT