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

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

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

Скрипт

// добавляем активный пункт навигации
      $(".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 якорем промежуток только в виде кнопок, но активация происходит правильно. До первого якоря меню вовсе не активно.

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

рони,
хм, не доработано. При нажатии, например, на 5 пункт, в поиске добавляется его якорь "#gen" и больше не меняется, хотя при скролле наверх пункты якобы активны

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

рони,
вроде починил. подскажите, а где лучше проверить? Я перед вставкой проверяю в jsfiddle, затем делаю правки прямо на страничке сайта, если нужны. Сейчас он не показывать ошибок. А на исправление до идеала мне не хватит знаний пока. Хотя я был бы рад сжать всю эту js-структуру в более компактный вид.

может кто-то ещё подскажет ...

рони,
да вроде нашел, спасибо.