Single page navigation menu - active indicator

Question

I'm trying to update the navigation for a single page website using jQuery waypoints.

I want to update the navigation based on the current section in view. It works fine when going down using the navigation links. My problem is when you try to scroll to a section above the current section in view the active anchor is one below where it should be.

Please see my 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

<ul>
    <li class="test"><a href="#test"></a></li>
    <li class="test2"><a href="#test2"></a></li>
    <li class="test3"><a href="#test3"></a></li>
    <li class="test4"><a href="#test4"></a></li>
    <li class="test5"><a href="#test5"></a></li>
</ul>
<section id="test"></section>
<section id="test2"></section>
<section id="test3"></section>
<section id="test4"></section>
<section id="test5"></section>

Update

I got this to work using two waypoint functions with different offsets but this is clearly not the best solution.

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

I trying to find a way of specifying offsets from within the same function (depending on direction), I used a variable for offset with values of (1 & -1), but unfortunately it only uses +1.

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

Answer 1

Try this: your modified example

$(document).ready(function(){
        $('section').waypoint(function(direction) {
          var me = $(this); //added
          thisId = $(this).attr('id');
          $('ul li').each(function(){
            var secondaryID = $(this).attr('class');
            if  ( secondaryID == thisId )
                {
                    $('ul li').removeClass('active');

                    //added
                    if(direction==='up'){
                        me = $(this).prev();
                    }

                    //added
                    if(!me.length){
                        me = $(this);
                    }

                    $(this).addClass('active');
                }
            });
    },{offset: '0'});   
}); 

UPD ok, how about this example:

The idea is:

1) When we hit section N top border, while scrolling down, means active section become section N + 1.

2) When we hit section N top border, while scrolling top, means section N become active.

PS. sorry for my english

Javascript

$(document).ready(function(){
        $('section').waypoint(function(direction) {
            var activeSection = $(this);
            if(direction === 'down'){
                activeSection = $(this).next();
            }
            //activeSection = $(this);
            var sectionId   = activeSection.attr('id');
            $('ul li').removeClass('active');
            $('ul li.' + sectionId).addClass('active');
            console.log(activeSection);
        });
}); 

$('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 - (target.height() / 5)
            }, 500);
            return false;
        }
    }
});