I am trying to add onscroll event which will highlight the background colour of each phases, any suggestion? this is my html code
I have tried with a few listener option but I didn't have any luck
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>this is the answer i have found which seems to work pretty good:
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 = "" }
})