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

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

1 个答案: