hay un encabezado en mi sitio web, es transparente cuando el usuario está en la parte superior del sitio web, pero quiero cambiar su opacidad al 50% cuando el usuario se desplaza hasta cierta altura de la página, ¿CÓMO LO HAGO?
.navbar_outline{ background-color: yellow; border-radius: 50px; top: 10px; width: 1300px; height: 70px; position: absolute; position: fixed; margin-left: 35px; opacity: 50%; }Puede usar la función window.scrollY para agregar una clase a su barra de navegación cuando el usuario se desplazó lo suficiente.
if (window.scrollY>500) { var nav = document.getElementById("navbar"); nav.classlist.add("reduced-opacity"); }y luego el css:
.reduced-opacity{ opacity:.5; } document.addEventListener('scroll', function(e) { if (window.scrollY>500) { var nav = document.getElementById("nav"); nav.classList.add("reduced-opacity"); } }); #main{ height:600vh; background:lightblue; } #nav{ width:100%; height:10vh; background:red; position:sticky; top:10px; } .reduced-opacity{ opacity:.5; } <div id="main"> <div id="nav"> </div> </div>