Question

一旦用户点击它并且当用户滚动到相应的部分时，我想要导航突出显示（或类似的东西）。

但是，在我的计算机上点击3之后的任何导航事件时，只有导航事件3发生变化。我猜这是因为点击4或5后，滚动条已经位于页面底部，因此4和5从未到达顶部。顶部唯一的div是post 3，所以我的代码突出显示nav事件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。

Answer 2

你试图从头开始实现的，虽然值得称道，但已经由Bootstrap的优秀人员完成了。它被称为Scrollspy，你需要做的就是包括Bootstrap js和css（你还需要jquery但你已经有了）并对你的html做了一些小改动。

Scrollspy implementation steps.

And here is a demonstration.只注意一行js。：d

$('body').scrollspy({ target: '.navbar-example' });

使用滚动并在jQuery中单击来制作导航栏效果

2 个答案: