javascript - 在 jQuery 中使用滚动和单击制作导航栏效果

Question

我希望导航在用户点击它并且当用户滚动到相应部分时突出显示(或类似的东西)。

但是，在我的计算机上，当点击 3 之后的任何导航事件时，只有导航事件 3 发生变化。我猜这是因为在点击 4 或 5 之后，滚动条已经在页面底部，所以 4 和 5 永远不会到达顶部。顶部唯一的 div 是帖子 3，所以我的代码突出显示导航事件 3 并忽略点击。

有什么办法可以解决这个问题吗？我试过 if 语句(如果导航事件位于顶部且滚动条不在底部或顶部不是最后一项，则仅突出显示导航事件)。

这是一个更准确的 fiddle ，使用下面的修复程序显示我在说什么。该修复程序现在在滚动时突出显示，但如果您单击选项 5，它将不会突出显示。

$('.option').children('a').click(function() {
    $('.option').css('background-color', '#CCCCCC;');
    $(this).css('background-color', 'red');
    var postId = $($(this).attr('href'));
    var postLocation = postId.offset().top;
    $(window).scrollTop(postLocation);
});
$(window).scroll(function() {
    var scrollBar = $(this).scrollTop();
    var allPosts = [];
    var post = $('.content').offset();
    var lastPost = allPosts.legnth-1
    var windowHeight = $(window).height();
    var bottomScroll = windowHeight-scrollBar;
    $(".content").each(function(){            
        allPosts.push($(this).attr('id'));
    });
    i = 0;
    for(i in allPosts){
        var currentPost = "#"+allPosts[i];
        var postPosition = $(currentPost).offset().top;
        if (scrollBar >= postPosition){
            $('.option').css('background-color', '#CCCCCC');
            $('#nav'+allPosts[i]).css('background-color', 'red');
        }; 
    }; 
}); 

Answer 1

我认为您的 scroll() 做得太过了头了处理程序，为了简单起见，您只需要检查滚动条/scrollTop到达 '.contents'偏移最高值但不应大于其 offset().top加上它的 height() .

$(window).scroll(function () {
    var scrollBar = $(this).scrollTop();

    $(".content").each(function (index) {
        var elTop = $(this).offset().top;
        var elHeight = $(this).height();

        if (scrollBar >= elTop - 5 && scrollBar < elTop + elHeight) {
            /* $(this) '.content' is the active on the vewport, 
               get its index to target the corresponding navigation '.option',
               like this - $('.Nav li').eq(index)    
            */
        }
    });
});

而且您实际上不需要设置 $(window).scrollTop(postLocation);因为默认 <a>点击标签锚定，你可以省略那个，它会工作正常。但是，如果您正在寻找 animate您首先需要防止这种默认行为:

$('.option').children('a').click(function (e) {
    e.preventDefault();
    var postId = $($(this).attr('href'));
    var postLocation = postId.offset().top;

    $('html, body').animate({scrollTop:postLocation},'slow');
});

参见 demo .