添加onscroll事件以突出顯示每個階段的背景顏色

Question

我正在嘗試添加 onscroll 事件，它會突出顯示每個階段的背景顏色，有什么建議嗎？ 這是我的 html 代碼

我嘗試了一些偵聽器選項，但我沒有任何運氣

 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>

Answer 1

這是我找到的答案，它似乎工作得很好：

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 = "" }
 })