Unique de navigation de la page de menu qui active l'indicateur de

Je suis en train de mettre à jour la navigation pour une seule page web à l'aide de jQuery waypoints.

Je veux mettre à jour la navigation sur la base de la section en cours en vue. Il fonctionne très bien lorsque vous allez vers le bas en utilisant les liens de navigation. Mon problème est lorsque vous essayez de passer à une section au-dessus de la section en cours en vue de l'actif de l'ancre est l'un en dessous de l'endroit où il devrait être.

Veuillez consulter mon Démo.

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>

Mise à jour

J'ai eu ce travail à l'aide de deux waypoint fonctions avec des positions différentes, mais ce n'est clairement pas la meilleure solution.

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

J'ai essayé de trouver un moyen de spécifier les décalages à partir à l'intérieur de la même fonction (fonction de direction), j'ai utilisé une variable de décalage avec les valeurs de (1 & -1), mais malheureusement il ne l'utilise +1.

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

OriginalL'auteur hyperdrive | 2013-08-27

  1. 3

    Essayez ceci: votre modifiés exemple

    $(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, comment sur cet exemple:

    L'idée est la suivante:

    1) Quand nous sommes arrivés à la section N de la bordure supérieure, tandis que le défilement vers le bas, moyen actif de la section devenir l'article N + 1.

    2) Quand nous sommes arrivés à la section N de la bordure supérieure, lors du défilement haut, signifie la section N devient actif.

    PS. désolé pour mon anglais

    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;
        }
    }
});
    Merci, je pense qu'il y a quelque chose ici, mais il ne fonctionne pas comme cela. Le problème est waypoints ne mettent pas le feu à l'aide des boutons de navigation. Il fonctionne sur 'jusqu'à' la direction, si j'ai par exemple modifier le décalage de '-1'. Mais alors, il ne fonctionnera pas pour aller vers le bas.
    Je l'ai eu à travailler à l'aide de deux waypoint appels, mais je ne pense pas que c'est la meilleure solution.
    regarder mise à jour de la réponse, j'espère qu'elle va hep vous
    Si simple. Merci cela a aidé.

    OriginalL'auteur Dart