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

Question

[Iana S]

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

Comments

[Антон Литвиненко]

В гугле jquery active menu on scroll

Answer 1

[Oleh Lantukh]

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');
    }
    });
});

Примерно так

Comments

[Iana S]

спасибо! то, что нужно

[Jack]

Подскажите, пожалуйста. А если у меня нет хэдера, совсем, как преобразовать ваш код, чтоб правильно работал? О компании - это не хэдэр, а заголовок блока.

[Oleh Lantukh]

Jack, просто не нужно отнимать высоту хедера

window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;

    document.querySelectorAll('.section').forEach((el, i) => { // Находим все секции или заголовки
    if (el.offsetTop <= 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');
    }
    });
});

[Jack]

Благодарю )

Answer 2

[Никита Михайлов]

Первая мысль — после загрузки страницы высчитывать позицию нужного заголовка с помощью JS и контролировать позицию меню при скролле. Если они совместились, то добавляется класс к ссылке.

Comments

[Iana S]

а можете, пожалуйста, подсказать как начать? хотелось бы на JS попробовать. Но пока я полный новичок. Хотя бы откуда отталкиваться и про что почитать?

[Rerurk]

Iana S, сюдЫ

Answer 3

[andreyzvd]

Как написали выше - с помощью js
Рекомендую библиотеку jQuery - Viewportchecker