Question

会尝试解释这个:) 我有一个滚动到页面上不同锚点的导航。当用户在其中一个锚点上时，导航会显示一个活动链接。

现在我认为一个很好的效果是，如果用户，让我们说是在页面的顶部，点击链接将我们移动到页面的底部，同时向下滚动它们之间的每个链接将是滚动经过时突出显示。就像一个红绿灯。

暂时我有这个Jquery，但它在点击链接上只有添加/删除类。关于我应该如何继续的任何想法？

$(document).ready(function($){
    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });

        $('.navigation ul li a').click(function () {
        $('.navigation ul li a').removeClass('active');
            $(this).addClass('active');
    });   
});

我还创建了JSfiddle

Answer 1

编辑：修改代码以获得更好的效果。

我创建了一个JSFiddle，它在这里工作了我添加的内容

var parPosition = [];
        $('.par').each(function() {
            parPosition.push($(this).offset().top);
        });

        $(document).on('scroll', function() {
            var position = $(document).scrollTop(),
                index;

            for (var i=0; i<parPosition.length; i++) {
                if (position <= parPosition[i]) {
                    index = i;
                    break;
                }
            }

            $('.navigation ul li a')
               .removeClass('active')
               .eq(index)
               .addClass('active');
        });

如您所见，我在所有段落中添加了“par”类。 JSFiddle

在页面上向下滚动时突出显示导航点

1 个答案: