JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<div class="scroll-spy-section" id="teet">item 1</div>
<div class="scroll-spy-section">item 2</div>
<div class="scroll-spy-section">item 3</div>
<div class="scroll-spy-section" id="ltre">item 4</div>

CSS

.scroll-spy-section {
  border: 1px solid red;
}

JavaScript

let spySections = document.querySelectorAll('.scroll-spy-section')
   console.log(spySections.length);
   
   let lastSpy = spySections[spySections.length- 1];
   console.log('lastChild', lastSpy.id )
   let top = window.pageYOffset - document.documentElement.clientTop || 0;
   for(i=0; i< spySections.length-1; i++ ){
   		spySections[i].innerHTML= `Hello ${i}`; 
      //console.log(spySections[i].id)
      console.log(spySections[i].offsetTop)
      if (top >= spySections[i].offsetTop -510 && top < spySections[i+1].offsetTop -510 && this.selected !== spySections[i].id ) {
      	this.selected = spySections[i].id;
      } 
      
   }