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

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

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

我暂时有这个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 

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