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

Я хочу обновить навигацию на основе текущего раздела в представлении. Работает нормально при переходе по ссылкам навигации. Моя проблема в том, что когда вы пытаетесь прокрутить раздел над текущим разделом, активная привязка находится ниже того места, где она должна быть.

Пожалуйста, смотрите мойDemo.

JQuery

$(document).ready(function(){
        $('section').waypoint(function(direction) {
          thisId = $(this).attr('id');
          $('ul li').each(function(){
            var secondaryID = $(this).attr('class');
            if  ( secondaryID == thisId )
                {
                    $('ul li').removeClass('active');
                    $(this).addClass('active');
                }
            });
    },{offset: '0'});   
}); 
$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 500);
            return false;
        }
    }
});

HTML

    <a href="#test"></a>
    <a href="#test2"></a>
    <a href="#test3"></a>
    <a href="#test4"></a>
    <a href="#test5"></a>

Обновить

Я заставил это работать, используя две функции путевых точек с разными смещениями, но это явно не лучшее решение.

http://jsfiddle.net/SJkmh/10/

Я пытался найти способ задания смещений из одной и той же функции (в зависимости от направления), я использовал переменную для смещения со значениями (1 & -1), но, к сожалению, он использует только +1.

http://jsfiddle.net/SJkmh/13/