Одностраничное навигационное меню - активный индикатор

Question

Я пытаюсь обновить навигацию для одного веб-сайта, используя путевые точки 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

<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

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

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

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

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

Answer 1

Попробуйте это: 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 хорошо, как насчет this example:

Идея такова:

1) Когда мы попали секции N сверху граница, при прокрутке вниз, означает активную секцию beco me раздел N + 1.

2) Когда мы нажимаем верхнюю границу раздела N, при прокрутке вверх, означает, что раздел N становится активным.

PS. простите за мой английский

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; 
     } 
    } 
});