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

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