I need help implementing an onscroll event that will change the background color of each phase. Can anyone provide suggestions on how to achieve this? Here is my HTML code:
I have experimented with a few listener options, but haven't been successful so far.
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>