Активный пункт при прокрутке к якорю

[madeas]

Добрый день!
Подскажите, как правильно доработать функционал.

У меня есть скрипт, который добавляет активный пункт к ссылке в меню, но я не знаю как сделать так, чтобы он активировался и при скролле мимо якоря.

Скрипт

// добавляем активный пункт навигации
      $(".vertical a").click(function() {
        $(".active").removeClass("active");
        $(this).addClass("active");
      });

Меню

<div class="vnavbar">
      <nav class="vertical">
        <ul>
          <li><a href="#download" class="dot"><span>Download</span></a></li>
          <li><a href="#usage" class="dot"><span>Basic Usage</span></a></li>
          <li><a href="#gen_css" class="dot"><span>Setting preview</span></a></li>
          <li><a href="#css_gen" class="dot"><span>Min.css Gen</span></a></li>
          <li><a href="#gen" class="dot"><span>Box-shadow Gen</span></a></li>
        </ul>
      </nav>
    </div><!-- /vnavbar -->

[Rise]

А как вы себе это представляете, когда одновременно все пункты меню находятся в области видимости (вьюпорт)? Прокрутка (скролл) на том и работает что относительно вьюпорта действует.

[madeas]

Rise,
так есть же фиксированные бары. Только, как я понял, там контент делят на секции, где каждая секция = один экран. И при прокрутке активируется тот или иной пункт. В моем случае на экране может быть два пункта, но ведь расстояние между ними есть, пусть и не в 20, а в 4 небольших скролла колесиком.

[Rise]

Хорошо, такой вариант работал в свое время, но это так примитивный, наверное можно оптимизировать, да и там про футер)

[рони]

при скролле, циклом проверять Math.abs(Element.getBoundingClientRect().top), у какого top меньше, ссылку на этот блок и "подсвечивать" , остальные ссылки "гасить".

[madeas]

Сделал так, но все равно что-то не работает. https://jsfiddle.net/zew5ra7f/2/

Хотя на другом примере работает.

[рони]

madeas,
зачем тут parent?

if (lastId !== id) {
    lastId = id;
    menuItems
      .parent().removeClass("active")
      .end().filter("[href=#" + id + "]").parent().addClass("active");
  }

попробуйте так

if (lastId !== id) {
    lastId = id;
    menuItems.removeClass("active").filter("[href='#" + id + "']").addClass("active")
   }

[madeas]

рони,
тогда получается, что и это тоже не нужно? Ну или не обязательно.

$(".vertical a").click(function() {
  $(".active").removeClass("active");
  $(this).addClass("active");
});

[madeas]

Ну да, все правильно, получается дублирование. рони, спасибо.

[рони]

что и это тоже не нужно?

это вам решать ... есть вопрос: кликнули по 5 ссылке, но "активной" станет третья, если не хватит скролла?