.nav-header2{ background: purple; display: flex; justify-content: center; align-items: center; } .header2-container{ width: 68vw; height: 60px; padding: 0 2vh; border: 1px solid red; border-radius: 0.5rem; display: flex; justify-content: space-between; align-items: center; } .nav-header1{ background: lightblue; display: flex; justify-content: center; align-items: center; } .header1-container{ width: 68vw; height: 60px; padding: 0 2vh; border: 1px solid blue; border-radius: 0.5rem; display: flex; justify-content: space-between; align-items: center; } <!--header2 --> <nav class="nav-header2"> <div class="header2-container"> <h1>header2<h2> </div> </nav> <!-- header1 --> <nav class="nav-header1"> <div class="header1-container"> <h1>header1<h2> </div> </nav>Tengo dos encabezados para mi página web. Nombré header1 y header2.
Quiero mostrar el encabezado 2 cuando me desplace hacia abajo a más de 60 px y ocultarlo cuando el desplazamiento sea inferior a 60 px.
si (desplácese hacia abajo más grande que 60 px){ show header2 }else{ todavía mostrar header1 }
Lo he intentado muchas veces, pero no puedo tener éxito. Por favor ayuda ¡Muchas gracias!
Verifique el código a continuación cuando se desplaza 60px y más, el encabezado 1 desaparece y aparece el encabezado 2
window.addEventListener("scroll", () => { if (scrollY >= 60) { document.querySelector(".headerOne").style.display = "none"; document.querySelector(".headerTwo").style.display = "block"; } else { document.querySelector(".headerTwo").style.display = "none"; document.querySelector(".headerOne").style.display = "block"; } }); * { margin: 0; padding: 0; box-sizing: border-box; } section { height: 100vh; display: flex; align-items: center; justify-content: center; font-size: 60px; background-color: gray; } .headerOne, .headerTwo { position: fixed; top: 0; left: 0; background-color: white; width: 100%; font-size: 20px; text-align: center; height: 60px; } .headerTwo { display: none; } <div class="headerOne">header 1</div> <div class="headerTwo">header 2</div> <section>section</section> <section>section</section>