<nav class="nav">
  <a href="#home" class="nav__link">Home</a>
  <a href="#about" class="nav__link">About</a>
  <a href="#another_block" class="nav__link">Another Block</a>
  <a href="#contacts" class="nav__link">Contacts</a>
</nav>
<section class="container" id="home">
  <h1 class="container__title">Home</h1>
</section>
<section class="container" id="about">
  <h1 class="container__title">About</h1>
</section>
<section class="container" id="another_block">
  <h1 class="container__title">Another Block</h1>
</section>
<section class="container" id="contacts">
  <h1 class="container__title">Contacts</h1>
</section>

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
}

.container {
  height: 100vh;
  padding: 32px;
  box-sizing: border-box;
  background: var(--background, #ffffff);
  color: var(--color, #111111);
}

.container__title {
  margin: 0;
  font-size: 4em;
}

.nav {
  position: fixed;
  right: 0;
  top: 50%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7);
}

.nav__link {
  text-decoration: none;
  color: #ffffff;
}

.nav__link--active {
  font-weight: 700;
}

#home {
  --background: #9b3447;
  --color: #ffffff;
}

#about {
  --background: #d1c576;
}

#another_block {
  --background: #83a4d6;
  --color: #ffffff;
}

#contacts {
  --background: #769833;
  --color: #ffffff;
}

const containers = document.querySelectorAll('.container');
const links = document.querySelectorAll('.nav__link');

const observer = new IntersectionObserver(entries => {
  const sortedEntries = entries.sort((a, b) => b.intersectionRatio - a.intersectionRatio);
  const entry = sortedEntries[0].target;
  
  for (let link of links) {
    const href = link.getAttribute('href').slice(1);
    
    if (href === entry.id) {
      link.classList.add('nav__link--active');
    } else {
      link.classList.remove('nav__link--active');
    }
  }
}, {
  threshold: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9]
});

for (let container of containers) {
  observer.observe(container);
}