javascript - 使用 jQuery 更改依赖于滚动位置的类时遇到问题

Question

一些非常有帮助的人编写并修改了一个脚本，以在将页面滚动到相关部分时更改导航项上的类。原帖如下:Use jQuery to change a class dependent on scroll position 。

我的第一个问题是数组的最后一部分被忽略。其他人有这个问题，并提供了一个解决方案，该解决方案对他们有效，但对我无效:jQuery class change based on scroll ignoring last section .

第二个问题是，即使不考虑数组中的最后一部分也不会被选择，新的类名只会添加到我的导航项中，但从未删除，因此当我滚动到在页面底部，除了我的导航中的最后一个项目外，所有项目都已“选择”为一个类别。我真的很感激任何见解。这是我的代码，它与修改后的版本几乎相同，除了我使用标题而不是部分(这可能很重要？):

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");
        }
    });

恐怕我无法发布该网站本身 - 它正在开发中，我无法在其上线之前透露它。不过，感谢您的帮助!

Answer 1

这看起来有点奇怪:

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 == len-1 时，[i+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;
};