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() {
  blocks.forEach(block => block.classList.remove('active'));

  const blockOnScreen = [...blocks].find((block) => {
    return block.getBoundingClientRect().top > 0;
  });

  if (blockOnScreen) blockOnScreen.classList.add('active');
});