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

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

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

Скрипт

// добавляем активный пункт навигации
      $(".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,
так есть же фиксированные бары. Только, как я понял, там контент делят на секции, где каждая секция = один экран. И при прокрутке активируется тот или иной пункт. В моем случае на экране может быть два пункта, но ведь расстояние между ними есть, пусть и не в 20, а в 4 небольших скролла колесиком.

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

Сделал так, но все равно что-то не работает. 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")
   }

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

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

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

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

Почему? Вот пример https://madeas.github.io/box-shadows все работает. Между 1 и 2 якорем промежуток только в виде кнопок, но активация происходит правильно. До первого якоря меню вовсе не активно.

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