Добавить класс к ссылке привязки при прокрутке мимо якоря div - jquery

Question

У меня есть страница, на которой есть якоря, которые ссылаются на соответствующие разделы страницы. Мне интересно, есть ли у кого-нибудь совет о том, как я могу переключать класс якорной ссылки при щелчке по ссылке, а также когда окно / страница прокручивается до соответствующего div с использованием jQuery?

Например, есть 3 якорные ссылки, которые ссылаются на 3 раздела:

<ul>
  <li><a href="#section1">Section 1</li>
  <li><a href="#section2">Section 2</li>
  <li><a href="#section3">Section 3</li>
</ul>

Тогда есть 3 раздела:

<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>

То, что я хотел бы сделать, это когда страница прокручивается к одному из элементов div или щелкается привязка, класс ссылки привязки будет переключаться. Таким образом, если щелкнуть привязку #section 1 или страница прокручивается до элемента # section1, класс будет добавлен к ссылке привязки section1. Если раздел 2, то ссылка #section2 получит класс, а ссылка section1 удалит класс и так далее.

Я думаю, что мне может понадобиться способ отследить расположение каждого раздела div и затем переключить класс по соответствующей ссылке, но я не слишком уверен, с чего начать.

Заранее спасибо за любую помощь или совет.

Answer 1

Я бы предложил найти общую высоту каждой секции. Я предполагаю, что между каждым разделом также нет перерывов. Затем используйте jQuery для определения положения окна. Когда положение окна достигает определенного значения, переключите класс. Надеемся, что это можно сделать только с помощью прокрутки, поэтому при нажатии на ссылку она будет прокручиваться, и ранее описанная функция сможет запускать и изменять классы для вас.

Вот некоторый псевдокод

$(document).ready(function(){
    var section1Height = $('#section1').height();
    var section2Height = $('#section2').height();
    var section3Height = $('#section3').height();

    $(window).scroll(function() {
        var winTop = $(window).scrollTop();
        if(winTop >= section1Height && winTop <= section2Height){
            $('#section1').addClass("newClass").not().removeClass("newClass");
        } else if(winTop >= section2Height && winTop <= section3Height){
            $('#section2').addClass("newClass").not().removeClass("newClass");
        } else if(winTop >= section3Height){
            $('#section3').addClass("newClass").not().removeClass("newClass");
        }
    });
});

Опять же, это всего лишь быстрый пример. Более подробно с вашей стороны, я могу дать более подробный ответ.