JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
<ul>
<li class="navigation--item" data-id="1">2008</li>
<li class="navigation--item" data-id="2">2009</li>
<li class="navigation--item" data-id="3">2010</li>
<li class="navigation--item" data-id="4">2011</li>
</ul>
</div>

<div id="content">
  <div class="content-section" data-nav-id="1">
    <h2>2008</h2>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>  
  </div>
  <div class="content-section" data-nav-id="2">
    <h2>2009</h2>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>    
  </div>
  <div class="content-section" data-nav-id="3">
    <h2>2010</h2>
    <p>asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd asdasdasdasdasdasd</p>
    <p>asdasdasdasdasdasd...

CSS

#navigation{
  display: block;
  width: 200px;
  position: fixed;
  left: 0;
  top: 0;
}

#navigation ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#navigation li{
  color: #000;
}

#navigation li.active{
  color: #c00;
}

#content{
  margin-left: 200px;
}

JavaScript

let contentSections = document.querySelectorAll('.content-section');
let offset = window.innerHeight / 2;

window.addEventListener('scroll', function(e){
	
  for(let i in Array.from(contentSections)) {
 
   let bb = contentSections[i].getBoundingClientRect();
   let navNode = document.querySelector('.navigation--item[data-id="'+ contentSections[i].getAttribute('data-nav-id') +'"]');
      
   if(bb.top < offset && bb.top + bb.height > offset){
   		
     	if(!navNode.classList.contains('active')) {
      	 navNode.classList.add('active');
      }
      
   }else{
   		if(navNode.classList.contains('active')) {
      	 navNode.classList.remove('active');
      }
   }
   
  }
}, { passive : false });