changement de classe basée sur jQuery défilement en ignorant la dernière section

Question

J'utilise jQuery pour guider mes pages défilement et changer la couleur d'un élément de navigation pour correspondre à la section que vous êtes. Fonctionne bien, mais le script Tout est ignore la dernière section de la page (Contact).

Ceci est en grande partie basée sur une autre question sur Stack, mais je l'ai modifié le code pour répondre à mes besoins, puis a couru dans la question.

Test Site: http://dev4.dhut.ch/

HTML:

<nav>
    <ul>
        <li class="active"><a href="#music" title="Music">MUSIC</a></li>
        <li><a href="#photos" title="Photos">PHOTOS</a></li>
        <li><a href="#lyrics" title="Lyrics">LYRICS</a></li>
        <li><a href="#news" title="News">NEWS</a></li>
        <li><a href="#info" title="Info">INFO</a></li>
        <li><a href='#contact' title="Contact">CONTACT</a></li>
    </ul>
    <span></span>
</nav>

JavaScript:

var $sections    = $('section'),
    $navs        = $('nav > ul > li'),
    topsArray    = $sections.map(function(){
                       return $(this).position().top - 100;
                   }).get(),
    len          = topsArray.length,
    currentIndex = 0,
    getCurrent   = function(top){
                       for(var i = 0; i < len; i++){
                           if(top > topsArray[i] && topsArray[i+1] && top < topsArray[i+1]){
                               return i;
                           }
                       }
                   };

$(document).scroll(function(e){
    var scrollTop  = $(this).scrollTop(),
        checkIndex = getCurrent( scrollTop );

    if( checkIndex !== currentIndex ){
        currentIndex = checkIndex;
        $navs.eq( currentIndex ).addClass('active').siblings('.active').removeClass('active');
    }
});

Answer 1

Je pense que la ligne suivante est où se trouve le problème:

if(top > topsArray[i] && topsArray[i+1] && top < topsArray[i+1]){

Plus précisément topsArray[i+1] n'est pas défini pour la dernière itération de i. Essayez de pousser une plus grande valeur en topsArray qui inclut la hauteur de la page.

topsArray = $sections.map(function(){
               return $(this).position().top - 100;
            }).get(),
topsArray.push(document.height);