将 class 添加到香草 JS 中滚动的特定元素

Question

I have a page with 4 DIV's, every DIV has the height of 100vh, that's 400vh. I want to add a specific class to every DIV dependent on the scroll from the top of the page. For example, 0-100vh from the top, class will be added to the first div, the 100-200vh class will be added to the second div (and removed from first), etc. Can someone share a javascript code for this (I don't want to use any library, just vanilla JS)? :)

I tried to Google for it, but I didn't find anything useful for me, only some jQuery scripts...

<div></div>
<div></div>
<div></div>
<div></div>

<style>
  div {
   height: 100vh;
  }

  .addThis {
    background-color: red;
  } 

</style>

Just want to add class.addThis to one of div's depend on scrolled from top.

Answer 1

Using getBoundingClientRect().top if element in viewport specific class adding and when out of viewport it'll remove.

 window.onscroll = function() { var elem = document.getElementsByTagName("div"); for(i=0;i<elem.length;i++){ if(elem[i].getBoundingClientRect().top <= 0){ for(j=0;j<elem.length;j++){ elem[j].classList.remove("addThis") } elem[i].classList.add("addThis") } } }

 body{ margin:0 } *{ box-sizing:border-box } div { width:100%; height: 100vh; border-bottom:5px solid; background:grey }.addThis { background-color: red; }

 <div></div> <div></div> <div></div> <div></div>