Estoy haciendo una barra de navegación. Bueno, funciona correctamente (me desplazo hacia abajo y el estilo cambia), pero luego, cuando me desplazo hacia arriba, los estilos siguen siendo los mismos. ¿Hay alguna forma de cambiar los estilos cuando me desplazo a la parte superior?
Aquí está el HTML
<div class="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact</a></li> </ul> <a href="#"><span>Visit San Francisco</span></a> </div>Aquí está el JavaScript:
var body = document.querySelector("body"); var navbar = document.querySelector(".navbar"); var cover = document.querySelector(".cover"); function changeNavbarStyle() { navbar.classList.add("postConv"); } function removeNavbarStyle() { navbar.classList.remove("postConv"); } body.onscroll = changeNavbarStyle;La mayoría de los navegadores modernos como "Firefox", "Opera", "Edge", ... usan document.documentElement.scrollTop para detectar la posición de desplazamiento desde la parte superior de la página. Entonces, tal vez si cambia su secuencia de comandos de la siguiente manera, funcione:
var body = document.querySelector("body"); var navbar = document.querySelector(".navbar"); var cover = document.querySelector(".cover"); function changeNavbarStyle() { navbar.classList.add("postConv"); if(document.documentElement.scrollTop === 0) { removeNavbarStyle(); } } function removeNavbarStyle() { navbar.classList.remove("postConv"); } body.onscroll = changeNavbarStyle; body { min-height: 850px; } .postConv { background-color: #c5bdd1; position: fixed; top: 0; left: 0; width: 100%; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>nav-style</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact</a></li> </ul> <a href="#"><span>Visit San Francisco</span></a> </div> <script src="script.js"></script> </body> </html>Puede usar el evento HTML DOM onScroll . Entonces su código HTML se vería así:
<body id="body" onscroll="scroll()"> <div class="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact</a></li> </ul> <a href="#"><span>Visit San Francisco</span></a> </div> </body> Y en su código JavaScript definirá su método scroll() como:
function scroll() { var elmnt = document.getElementById("body"); var y = elmnt.scrollTop; if(y == 0) { navbar.classList.remove("postConv"); } else { navbar.classList.add("postConv"); } }