Динамически добавлять класс, когда разделы достигают верхней части страницы

0

Я разрабатываю веб-сайт и хотел бы добавить некоторые функции jQuery на страницу. В основном, страница имеет боковую панель с меню (показывая все разделы этой одной страницы). Я добавил функциональность, когда при нажатии элемента меню основной раздел прокручивается до нужного раздела.

Мне удалось добавить активный класс в эти пункты меню, когда они будут нажаты с помощью jQuery. Видеть:

$('#category-list li a').click(function(){
    $('#category-list li a').removeClass("category-list-active");
    $(this).addClass("category-list-active");
});

Но я хотел бы добавить ту же функциональность, когда пользователь прокручивает страницу вниз (AKA, когда один раздел попадает в верхнюю часть страницы, соответствующий пункт меню получает класс активного состояния).

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

Заранее спасибо,

  • Энди
  • 0
    Вам нужно будет добавить обработчик для прокрутки окна (и, возможно, изменить его размер) и рассчитать, какие элементы находятся на экране, на основе их положения и положения прокрутки страницы.

1 ответ

0

Вы можете попробовать что-то вроде этого

var fl = $("#your-section").offset().top;
$(window).scroll(function() {
  if(this.scrollTop() > fl) {
    // do your stuff
   }
 })

Возможно, вам придется сыграть со смещением, чтобы найти точное положение, в котором должен произойти переход.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню