Итак, давайте разбираться. Напишем простейший 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) задаем класс

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

Удачи!