Как правильно сделать Scrollspy?

Question

[gassmonkey]

Имеется вот такой код.

// Scrollspy
$(window).scroll(function() {
    var paGe = $(window).scrollTop();
    var a1 = $('#a1').offset();
    var a2 = $('#a2').offset();
    var a3 = $('#a3').offset();
    if (paGe < a1.top){
        $('.nav li').removeClass('active');
    }
    if (paGe > a1.top){
        $('.nav li').removeClass('active');
        $('.nav li').eq(0).addClass('active');
    }
    if (paGe > a2.top){
        $('.nav li').removeClass('active');
        $('.nav li').eq(1).addClass('active');
    }
    if (paGe > a3.top){
        $('.nav li').removeClass('active');
        $('.nav li').eq(2).addClass('active');
    }
});

Как упростить его, чтоб не задавать значения, а перебирать их в цикле?

Comments

[gassmonkey]

Владлен Ultra: А какая разница, если так или иначе считать отступ каждой секции в отдельности?

[Shadowman69]

Спасибо тебе, автор вопроса, уже час час ищу как сделать Scrollspy на jQuery в инете, и не могу найти, всюду выбивает только как якоря по странице делать, или Scrollspy на бутстрапе) Выручил очень)

Answer 1

[SirMustache]

$(window).on('scroll', function() {
  var fromTop = $(document).scrollTop(),
      $items = $('.item'),
      allItems = [],
      $currentItem;

  allItems = $items.filter(function() {
    return $(this).offset().top < fromTop;
  });
  $currentItem = allItems.eq(allItems.length - 1);

  $items.removeClass('active');
  $currentItem.addClass('active');
});

Comments

[gassmonkey]

Вы добавляете активный класс к самой секции? Не вижу взаимосвязи секций и меню.

[SirMustache]

gassmonkey: тогда
currentItem = allItems.length - 1;

$('.nav li').removeClass('active');
$$('.nav li').eq(currentItem ).addClass('active');

[Shadowman69]

А вот этот скрипт почему-то не работает, может что не так сделал, что это за класс item, то есть какой элемент он обозначает?