0

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

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

我目前有这个 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

4

1 回答 1

5

编辑：修改代码以获得更好的性能。

我做了一个 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

于 2013-07-16T21:20:50.200 回答