Estoy tratando de agregar un evento de desplazamiento que resaltará el color de fondo de cada fase, ¿alguna sugerencia? este es mi codigo html
Lo intenté con algunas opciones de escucha pero no tuve suerte.
document.addEventListener("scroll", myFunction) function myFunction() { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { document.getElementById("phases2").className = "background-scroll"; } else { if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { document.getElementById("phases2").className = "nobackground"; } else { document.getElementById("phases3").className = "background-scroll"; } } } .background-scroll { background-color: rgb(0, 0, 0, 0.521); border-radius: 20px; } .nobackground { background-color: rgba(0, 0, 0, 0); } <section class="phases"> <div class="row-padding"> <div class="row"> <div class="phases-col" id="phases2"> <img class="phases1" src="/images/1645177223057.png" /> <h3>Phase1</h3> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, minus eius earum necessitatibus reprehenderit, excepturi soluta, cumque sed maiores in doloremque assumenda? Eum, officia? Praesentium aspernatur neque atque numquam iste.</p> </div> <div class="phases-col"> <img class="phases1" src="/images/1645177161131.png" /> <h3>Phase2</h3> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus, minus eius earum necessitatibus reprehenderit, excepturi soluta, cumque sed maiores in doloremque assumenda? Eum, officia? Praesentium aspernatur neque atque numquam iste.</p> </div> <div class="phases-col"> <img class="phases1" src="/images/1645176961476.png" /> <h3>Phase3</h3> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elt. Repellendus, minus eius earum necessitatibus reprehenderit, excepturi soluta, cumque sed maiores in doloremque assumenda? Eum, officia? Praesentium aspernatur neque atque numquam iste.</p> </div> </div> </div> </section>esta es la respuesta que he encontrado que parece funcionar bastante bien:
window.addEventListener("scroll", function(event){ var scroll = this.scrollY; if (scroll > 190) { document.getElementById('phases2').style.backgroundColor = "rgba(5, 5, 5, 0.548)" } else { document.getElementById('phases2').style.backgroundColor = "" } if (scroll > 650){ document.getElementById('phases2').style.backgroundColor = "", document.getElementById('phases3').style.backgroundColor = "rgba(5, 5, 5, 0.548)" }else { document.getElementById('phases3').style.backgroundColor = "" } if (scroll > 960){ document.getElementById('phases3').style.backgroundColor = "", document.getElementById('phases4').style.backgroundColor = "rgba(5, 5, 5, 0.548)" }else { document.getElementById('phases4').style.backgroundColor = "" } })