2

introducir la descripción de la imagen aquíTengo un nav con el id "navbar". Al igual que tiene la propiedad Fixed por lo cual siempre esta al top de la pagina,Que quiero que al hacer scroll hacia abajo, cambie de color por lo cual tengo el siguient metodo:

window.addEventListener("DOMContentLoaded" , () => {
        var element = document.getElementById("navbar");
        document.addEventListener("scroll", () => {
        element.setAttribute("style","background-color: rgba(255,255,255,10)");
        });
    });

Funciona, si, pero no se me ocurre la forma de hacer que cambie el color en una cierta cantidad de pixeles, al igual que en ves de hacer un setAttribute haga una incersion de una clase al elemento PD: es js puro

3
  • podrías poner un ejemplo hecho con paint o algo para ver el resultado de lo que deseas?
    – Sr1871
    el 23 jul. 2019 a las 20:51
  • Lo que quiero lograr, es que mi nav al hacer digamos 120 de scroll hacia abajo, cambie de color rojo (color inicial) a color negro (color al llegar a los 120 de ScrollY) de igual manera, deja realizo un dibujo rapido de ello el 23 jul. 2019 a las 20:53
  • Ya agrege la imagen, espero sea de ayuda el 23 jul. 2019 a las 21:07

2 respuestas 2

3

Prueba este código, cambia el estilo del div cuando llega a 200, tiene dos validaciones cuando el scroll llegue a 200 lo cambia de color , puedes poner un console.log a scrollTop para ver los valores que permite el scroll, ademas tiene una validacion para devolver el color al incial

$(window).scroll(function(event) {
  var scrollLeft = $(window).scrollLeft();
  var scrollTop = $(window).scrollTop();
 
  if(scrollTop >= 200){
    document.getElementById('test').style.backgroundColor='#C20000';
  }

 if(scrollTop < 200){
    document.getElementById('test').style.backgroundColor='#000000';
  }

});
#test{
width: 50%;
height: 500px;
background:#000000;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
</div>

2

Pongo el código con JS puro, si lo ejecutas y lo scrolleas, podrás ver que cambia la clase y el color de fondo, ajústalo a tu código

window.onscroll = function (e) {  
  var element = document.getElementById("nav");
  element.classList.add("change");
} 
div.nav {
  background-color: yellow;
  position :fixed;
}

.no-nav {
  overflow-y :scroll;
  height : 1000px;
}

.change {
  background-color : red !important;
}
<body class="no-nav" height="1000px">
  <div id="nav" class="nav" width=100%>
    nav
  </div>
</body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.