Изменение активного пункта меню при скролле

Итак, давайте разбираться. Напишем простейший html.

HTML

<nav class="nav">
  <ul>
    <li><a href="#" class="active">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
  </ul>
</nav>

<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<script src="script.js"></script>

Просто секции и сопоставимые с ним элементы навигации - ссылки.

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #131313;
  padding: 20px;
}

ul {
  display: flex;
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #fff;
  font-family: sans-serif;
  display: inline-block;
  margin-right: 25px;
}

a.active {
  color: red;
}

.section {
  height: 100vh;
  border: 1px solid #000;
}

Немного CSS, чтоб было не скучно, а также чтоб создать класс active и задать секциям размеры.

JS

window.addEventListener('scroll', () => {
  let scrollDistance = window.scrollY;

  if (window.innerWidth > 768) {
    document.querySelectorAll('.section').forEach((el, i) => {
      if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
        document.querySelectorAll('.nav a').forEach((el) => {
          if (el.classList.contains('active')) {
            el.classList.remove('active');
          }
        });

        document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
      }
    });
  }
});

Ну и относительно несложный JS:

1. Проходим по всем секциям на сайте
2. Смотрим, если отступ сверху у секции меньше или равен показателю скролла — тогда пробегаемся по ссылкам и нужной ссылке (через index) задаем класс

В общем-то и все, очень простой код. Надеюсь, поможет вам. Исходники внизу, а видео — в начале поста)

Удачи!