Прокрутка страницы jQuery не меняет ссылку на навигационную панель на активный класс ⇐ CSS

[Anonymous]

У меня есть одностраничный сайт. Когда я прокручиваю вниз, я хочу, чтобы мои (фиксированные) ссылки на панели навигации меняли статус на активный при достижении позиции этого конкретного элемента div.

Я использовал jQuery, но это не работает. Вот мой код:

Код: Выделить всё

// SMOOTH SCROLLING PAGES

$(document).ready(function () {
$(document).on("scroll", onScroll);

//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");

$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');

var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 800, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});

function onScroll(event){
var scrollPos = $(document).scrollTop();
$('main-navigation a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top  scrollPos) {
$('main-navigation ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
};

Вот мой HTML:

Код: Выделить всё

[list]
[*][url=#site-main]Home[/url]
[*][url=#a]A[/url]
[*][url=#b]B[/url]
[*][url=#c]C[/url]
[*][url=#d]D[/url]
[/list]

DIV Alpha
DIV Bravo
DIV Charlie
DIV Delta

Плавная прокрутка работает отлично, но когда я прокручиваю назад от div #d, активное состояние навигационной панели li не меняется.

Подробнее здесь: https://stackoverflow.com/questions/424 ... tive-class