@n_konovalov

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

Контекст

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

Задача

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

Прототип страницы на CodePen https://codepen.io/n_konovalov/pen/WNzLxaa
  • Вопрос задан
  • 42 просмотра
Решения вопроса 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");
        }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы