Necesito configurar tres fondos diferentes en una barra de navegación:
1. Sin fondo si la página tiene menos de 400 px de desplazamiento
2. Dos colores diferentes si el desplazamiento de la página es superior a 400 px: a) azul cuando me desplazo hacia abajo b) verde cuando me desplazo hacia arriba.
Intenté usar el siguiente código, pero parece que después de ingresar el primer IF, la función continúa funcionando incluso si la página tiene menos de 400 px.
window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) { var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("nav1").style.background = "rgba(0, 41, 51,1)"; } else { lastScroll = currentScroll; document.getElementById("nav1").style.background = "rgba(68,78,36,1)"; } prevScrollpos = currentScrollPos; } else { document.getElementById("nav1").style.background = "rgba(0,0,0,0)"; } }¡Gracias!
Puedes usar este script:
<script> window.onscroll = function () { myFunction() }; function myFunction() { if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) { var lastScrollTop = 0; window.addEventListener("scroll", function () { var st = window.pageYOffset || document.documentElement.scrollTop; if (st > lastScrollTop) { document.getElementById("nav").style.background = "rgba(0, 41, 51,1)"; } else { document.getElementById("nav").style.background = "rgba(68,78,36,1)"; } lastScrollTop = st <= 0 ? 0 : st; }, false); } else { document.getElementById("nav").style.background = "rgba(0,0,0,0)"; } } </script>No intente asignar dos funciones a window.onscroll , que es una propiedad y solo puede contener una función.
Esto es lo que está pasando con su código actual:
scrollFunction ) y se asigna a window.onscrollscrollFunction . Si la página aún no se ha desplazado más allá de 400 px, el bloque if no se ejecuta.prevScrollpos ... Luego, la función previamente asignada a window.onscroll se sobrescribe con una nueva.Es por eso que la comparación de 400px no se realiza después de eso. Está fuera de esa segunda función. El primero se perdió en la nada.
Esto es lo que quieres lograr:
// This variable needs to be global let prevScrollpos = 0; // This getElement can also be global let nav1 = document.getElementById("nav1") function scrollFunction() { // This varable needs to be local let currentScrollPos = window.pageYOffset; if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) { // Determine scroll direction if (prevScrollpos > currentScrollPos) { nav1.style.background = "rgba(0, 41, 51,1)"; } else { nav1.style.background = "rgba(68,78,36,1)"; } } // If below 400px else { nav1.style.background = "rgba(0,0,0,0)"; } // Update this variable for the next iteration prevScrollpos = currentScrollPos; // For this demo only console.clear() console.log(currentScrollPos) } // Assign the scrollFunction reference to the window property window.onscroll = scrollFunction; body { height: 1000px; } #nav1{ position: sticky; top: 4px; height: 100px; border: 1px solid black; } <div id="nav1"></div>