window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
document.querySelectorAll('.section').forEach((el, i) => { // Находим все секции в вашем случаи заголовки
if (el.offsetTop - document.querySelector('.header').clientHeight <= scrollDistance) { // Отнимаем высоту хедера
document.querySelectorAll('.menu-item').forEach((el) => {
if (el.classList.contains('menu-item--active')) {
el.classList.remove('menu-item--active');
}
});
document.querySelectorAll('.menu-item')[i].classList.add('menu-item--active');
}
});
});
Примерно так