Как сделать пункт меню активным при прокрутке?

Question

[Pavlo Marchenko]

Привет всем!
помогите разобраться, вот есть сайт
demo6.epiales.net/pavel/index.html

тут фиксированое меню, якоря все работают хорошо, но никак не могу сделать чтобы когда ты находишься на определённом блоке, подсвечивался соответствующий пункт в меню, очень долго уже копаюсь, помогите!

<ul class="header-navigation__list" role="tablist" >
                        <li class="header-navigation__item"><a href="#menu-link1" class="header-navigation__link ">Отзывы и примеры работ</a></li>
                        <li class="header-navigation__item"><a href="#menu-link2" class="header-navigation__link">Услуги и цены</a></li>
                        <li class="header-navigation__item"><a href="#menu-link3" class="header-navigation__link header-navigation__link_no-pad" >Наращивание рсниц и архитектура бровей</a></li>
                        <li class="header-navigation__item"><a href="#menu-link4" class="header-navigation__link" >Как нас найти</a></li>
</ul>

Answer 1

[Роман]

Тут пример. Давно делал одним товарищам лэндинг. Уже не помню. Но там на скролл повешен обработчик. Значения dp1..dp5 вычислял экспериментальным путем. Делал событие on scroll и выводил в console.log значение scrolled. Это отклонение по вертикали при проскролливании. А там уже тупое сравнение и addClass или removeClass

Функцияю помню сделал не очень элегантной, но решение рабочее. Инспектор кода, надеюсь сможете открыть, посмотреть и реализовать аналогично?)

window.onscroll = function() {
        var scrolled = window.pageYOffset || document.documentElement.scrollTop,
            dp1 = 500,
            dp2 = 1720,
            dp3 = 2287,
            dp4 = 2990,
            dp5 = 4007,
            nav = $('.navbar-inverse'),
            arrow = $('#arrow-upper');
        if(scrolled >= 0 && scrolled < dp1){
            if(!nav.hasClass('hide')){
                nav.addClass('hide');
                arrow.addClass('hide');
            }
        }
        if(scrolled > dp1){
            if(nav.hasClass('hide')){
                nav.removeClass('hide');
                arrow.removeClass('hide');
            }
        }
        if(scrolled > dp1 && scrolled < dp2){
            $('.nav li').removeClass('active');
            $('.nav li:nth-child(1)').addClass('active');
        }
        if(scrolled > dp2 && scrolled < dp3){
            $('.nav li').removeClass('active');
            $('.nav li:nth-child(2)').addClass('active');
        }
        if(scrolled > dp3 && scrolled < dp4){
            $('.nav li').removeClass('active');
            $('.nav li:nth-child(3)').addClass('active');
        }
        if(scrolled > dp4 && scrolled < dp5){
            $('.nav li').removeClass('active');
            $('.nav li:nth-child(4)').addClass('active');
        }
        if(scrolled > dp5){
            $('.nav li').removeClass('active');
            $('.nav li:nth-child(5)').addClass('active');
        }
    }

Answer 2

[Сергей Горячев]

Как сменить класс пункта меню при скролле до блока?
webcareer.ru/menyaem-aktivnyj-punkt-menyu-pri-prok...