Изменение класса jQuery на основе прокрутки, игнорирующей последний раздел - PullRequest
Новая
       25

Изменение класса jQuery на основе прокрутки, игнорирующей последний раздел

0 голосов
/ 29 ноября 2011

Я использую jQuery для прокрутки своих страниц и изменения цвета элемента навигации в соответствии с разделом, в котором вы находитесь. Все работает хорошо, но скрипт игнорирует последний раздел на странице (Контакты).

Это в основном основано на другом вопросе здесь, в стеке, но я изменил код в соответствии со своими потребностями, а затем столкнулся с проблемой.

Тестовый сайт: 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');
    }
});

1 Ответ

0 голосов
/ 29 ноября 2011

Я думаю, что в следующей строке находится проблема: 

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

В частности topsArray[i+1] не определено для последней итерации iПопробуйте вставить еще одно значение в topsArray, которое включает в себя высоту всей страницы. 

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