Estoy escribiendo un código que ocultará mi barra de navegación al desplazarse y la mostrará de nuevo en consecuencia.
Hasta ahora funciona bien, pero tenía curiosidad sobre cómo implementar alguna animación o transición para revelar/ocultar ese elemento.
Aquí está mi código hasta ahora
var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("bottom-navigation").style.bottom = "0"; } else { document.getElementById("bottom-navigation").style.bottom = "-100px"; } prevScrollpos = currentScrollPos; }transform y transition CSS que (a diferencia de otras propiedades como bottom top , etc.) se puede acelerar con GPU.hidden o .hide que, todo lo que necesita en JavaScript es un Element.classList.toggle ( className, boolean ) para alternar esa claseon(eventname) , a menos que esté creando elementos completamente nuevos desde la memoria.on* anulará cualquier nombre de evento agregado previamente a ese elemento. En su lugar, use un enfoque acumulativo , usando Element.addEventListener() const EL_bottomNav = document.querySelector("#bottom-navigation"); let prevScrollpos = window.pageYOffset; const toggleBottomNav = () => { EL_bottomNav.classList.toggle("hide", prevScrollpos <= window.pageYOffset); prevScrollpos = window.pageYOffset; }; // Do immediately: // toggleBottomNav(); // And on page scroll: window.addEventListener("scroll", toggleBottomNav); /* QuickReset */ * {margin:0; box-sizing: border-box; } body { min-height: 300vh; /* just to force some scrollbars */ } #bottom-navigation { position: fixed; width: 100%; bottom:0; background: gold; padding: 30px; transition: 0.5s; } #bottom-navigation.hide { transform: translateY(100%); } Scroll down and than up <footer id="bottom-navigation">I'm the bottom nav!</footer> Nota bene:
Dado que los eventos agregados en el desplazamiento son costosos, no consulte el DOM para su elemento. En su lugar, guárdelo en caché de antemano (como en el ejemplo anterior). También sería útil una función de aceleración para aprovechar la carga de llamadas de función pasadas al bucle de eventos en el hilo principal.