Question

0

129

Vistas

Add onscroll event to highlight the background colour of each phases

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>

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-04T01:30:03.281Z

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