Версия фреймворка в данном случае не важна, скорее всего Ваш html отличается от моего примера.
Обратите внимание на .css в примере. Класс, которым подсвечиваем ссылки в меню, имеет
!important
Сначала нужно понять, как работает данная реализация:
1. ловим событие
$(window).scroll()
2. на каждой итерацию (каждый пиксель скроллинга) получаем текущую позицию прокрутки документа
$(document).scrollTop()
3. на каждой итерации также проверяем, не совпадает ли позиция прокрутки документа с позицией каждого из элементов, но...
4. для этого (если элементов много) проходим по элементам циклом и работаем с каждым
5. для каждого элемента смотрим его положение в документе
$(element).offset().top
6. сравниваем наши пункты
2. и
5.:
if ($(document).scrollTop() >= $(element).offset().top) {...}
7. но при быстром скроллинге скрипт может не успеть отловить совпадение, поэтому расширяем пункт
6. и добавляем в
if (...) вторую границу диапазона (50px от верхней границы элемента):
&& $(document).scrollTop() < ($(element).offset().top + 50)
8. если условие выполнилось, смотрим id элемента, с которым работаем в данный момент в цикле:
$(element).attr('id')
9. используем переменные (
lastID,
elemID) чтобы лишний раз не добавлять класс ссылке в меню
10. находим в меню ссылку, атрибут которой соответствует id нашего элемента:
$('menu a[href='+$(element).attr('id')+']')
11. присваиваем ссылке в меню класс, предварительно убрав класс у остальных ссылок.
Упростил пример:
Посмотреть
.