@Sian
junior front dev

Как реализовать боковое фиксированное меню?

Есть боковое меню, зафикированное с помощью position:sticky
+ якорные ссылки на заголовки контента справа
Мне нужно сделать так, чтобы при скролле вниз, при достижении определенного заголовка, соответствующий пункт меню подсвечивался (становился активным).

5f5b680e313b2550050063.png
  • Вопрос задан
  • 91 просмотр
Решения вопроса 1
OlegLantukh
@OlegLantukh
Верстальщик
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');
    }
    });
});


Примерно так
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Psixodelik
@Psixodelik
Преподаватель на Hexlet
Первая мысль — после загрузки страницы высчитывать позицию нужного заголовка с помощью JS и контролировать позицию меню при скролле. Если они совместились, то добавляется класс к ссылке.
Ответ написан
@andreyzvd
Backend Developer
Как написали выше - с помощью js
Рекомендую библиотеку jQuery - Viewportchecker
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Sportrecs Москва
от 150 000 до 200 000 ₽
от 80 000 до 100 000 ₽
Maximal Челябинск
от 60 000 до 120 000 ₽