Как менять стиль пунктов навигации по мере прокрутки в соответствии с контентом на странице?

Question

[n_konovalov]

Контекст

Есть страница с большим объемом текста разбитым на главы ().
На странице есть прилипающая навигация — по клику на пункт перекидывает на указанный якорь.
По-умолчанию при открытии страницы на первому пункту навигации присвоен класс "active".

Задача

Сделать так, чтобы по мере скролла страницы класс "active" присваивался пункту меню в соответствии с главой на странице.
Мне кажется, что задача сводится к сравниванию координат нужной секции и позиции скрола window.pageYOffset. У меня не пока не хватает знаний чтобы сделать такое решение.

Прототип страницы на CodePen https://codepen.io/n_konovalov/pen/WNzLxaa

Comments

[Ankhena]

https://habr.com/ru/company/timeweb/blog/574972/

Answer 1

[Степан Крапивин]

Всё правильно сделал.

Добавь пару строк, в блок if

if(rect.y <= y && rect.y + rect.height > y) {
            
            let sectionId = section.id;
            console.log(sectionId);
            // дизактивируем все активные ссылки
            document.querySelector('.navigation .active').classList.remove("active");
            // активируем текущую
            document.querySelector(`[href*=${sectionId}]`).classList.add("active");
        }

Comments

[n_konovalov]

Спасибо большое. Даже стыдно, что сам не понял.