Mettre en évidence de lien actif lors de l'utilisation de scrollto basé sur la vue actuelle

J'ai un site qui est une page et que l'utilisateur accède à chaque section à l'aide de liens qui utilise le plugin jquery scrollto.

Mon problème est: j'en veux pour preuve le lien actif dans le menu principal. Donc, si vous faites défiler vers le formulaire de contact, le lien de contact est mis en surbrillance. Maintenant, je pouvais le faire en jquery par l'ajout de la classe après avoir cliqué. Si c'est fait comme ça si un utilisateur a à faire défiler manuellement à un autre article, le lien de contact serait toujours active, ce qui serait incorrect et trompeur.

Donc, mes pensées serait en quelque sorte de travail qui div id est actuellement en vue. Je ne comprends pas vraiment comment le faire bien. Des idées?

OriginalL'auteur Michael | 2011-12-05

  1. 20

    Cela devrait fonctionner pour vous d'ajouter le manuel de défilement remplacer: 

    $(function(){
    var sections = {},
        _height  = $(window).height(),
        i        = 0;

    //Grab positions of our sections 
    $('.section').each(function(){
        sections[this.name] = $(this).offset().top;
    });

    $(document).scroll(function(){
        var pos = $(this).scrollTop();

        //Look in the sections object and see if any section is viewable on the screen. 
        //If two are viewable, the lower one will be the active one. 
        for(i in sections){
            if(sections[i] > pos && sections[i] < pos + _height){
                $('a').removeClass('active');
                $('#nav_' + i).addClass('active');
            }  
        }
    });
});

    Démo: http://jsfiddle.net/x3V6Y/

    Je vous remercie beaucoup. Il fonctionne parfaitement. Vous pouvez le voir en action dans le lien
    Un plaisir de vous aider 🙂 Très jolie mise en œuvre - de l'allure!
    Puis-je vous demander comment faire pour modifier cela pour faire de l'objet actif le plus haut et pas le bas?

    OriginalL'auteur AlienWebguy