One-page navigation menu - active indicator

Question

I am trying to update navigation for a single website using jQuery waypoints.

I want to update the navigation based on the current section. It works great when navigating navigation links. My problem is when you try to jump to the section above the current section, in which the active anchor is below where it should be.

Please view the 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 am trying to find a way to set offsets from the same function (depending on the direction), I used a variable for the offsets with values ​​(1 and -1), but unfortunately it only uses +1.

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

Answer 1

Try the following: 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 this:

1) When we press the upper border of section N while scrolling down, it means that the active section will become section N + 1.

2) When we press the upper border of the N section, while scrolling up, means that the N section becomes 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; } } });