JSFiddle - React, Tailwind, and code Playground

by Sergey_N

HTML

<div class="block home__block active">home</div>
<div class="block works__block">works</div>
<div class="block about__block">about</div>
<div class="block contact__block">contact</div>
<div class="block hire__block">hire</div>

CSS

.block {
  height: 400px;
  margin-bottom: 20px;
  background: #f2f2f2;
  font-size: 2em;
  font-weight: bold;
}

.active {
  background: grey;
}

JavaScript

const blocks= document.querySelectorAll('.block');

window.addEventListener('scroll', function() {  
  const pageYOffset = this.pageYOffset;
  
	blocks.forEach(block=>block.classList.remove('active'));

	const blockOnScreen = [...blocks].find((block)=>{
  
  	return pageYOffset + 100 < block.offsetTop + block.clientHeight;
  });
  
  if (blockOnScreen) blockOnScreen.classList.add('active');
});