Возникли проблемы при использовании jQuery для изменения класса в зависимости от позиции прокрутки - PullRequest
Новая
       20

Возникли проблемы при использовании jQuery для изменения класса в зависимости от позиции прокрутки

3 голосов
/ 30 декабря 2011

Некоторые очень полезные люди написали, а затем изменили сценарий, чтобы изменить класс элемента навигации при прокрутке страницы до соответствующего раздела. Вот оригинальный пост: Используйте jQuery для изменения класса в зависимости от позиции прокрутки .

Моя первая проблема заключается в том, что последний раздел массива игнорируется. У кого-то еще был этот вопрос, и было предложено решение, которое работало для них, но не для меня: Изменение класса jQuery на основе прокрутки, игнорирующей последний раздел .

Вторая проблема заключается в том, что даже если оставить в стороне, что последний раздел в моем массиве никогда не выбирается, новое имя класса только добавляется к моим элементам навигации, но никогда не удаляется, так что к тому времени, когда я прокручиваю до внизу страницы, каждый элемент, кроме последнего в моей навигации, "выбран" как класс. Я действительно ценю любое понимание. Вот мой код, который практически идентичен модифицированной версии, за исключением того, что я использую заголовки, а не разделы (что может быть важно?): 

var $anchs = $('.content h1');
    var $navs = $('#zone-submenu div .content > .item-list > ul > li');

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

    var len = topsArray.length;
    var currentIndex = 0; 

    var getCurrent = function( top ) {   // take the current top position, and see which
        for( var i = 0; i < len; i++ ) {   // index should be displayed
            if( top > topsArray[i] && topsArray[i+1] && top < topsArray[i+1] ) {
                return i;
            }
        }
    };
    $(document).scroll(function(e) {
        var scrollTop = $(this).scrollTop();
        var checkIndex = getCurrent( scrollTop );
        if( checkIndex !== currentIndex ) {
            currentIndex = checkIndex;
            $navs.eq( currentIndex ).addClass("selected").siblings(".selected").removeClass(".selected");
        }
    });

Боюсь, я не могу опубликовать сам сайт - он находится в разработке, и я не могу раскрыть его до того, как он будет запущен. Спасибо за любую помощь, хотя!

1 Ответ

0 голосов
/ 30 декабря 2011

Это выглядит немного странно: 

currentIndex = checkIndex;
$navs.eq( currentIndex ).addClass("selected").siblings(".selected").removeClass(".selected");

Из того, что я могу сказать в вашем коде, должно быть: 

$navs.eq( currentIndex ).removeClass('selected');  // no dot
currentIndex = checkIndex;
$navs.eq( currentIndex ).addClass("selected");

ОБНОВЛЕНО Исправление "не отображается последний элемент индекса "...

Вы ссылаетесь на недопустимый элемент массива в вашей функции getCurrent - [i + 1] недопустимо, когда i == len-1.Вам нужно просто вернуть последний элемент, если это произойдет. 

var getCurrent = function( top ) {   // take the current top position, and see which
    for( var i = 0; i < len-1; i++ ) {   // index should be displayed
        if( top > topsArray[i] && topsArray[i+1] && top < topsArray[i+1] ) {
            return i;
        }
    }
    return len-1;
};
...