向下滚动页面时突出显示导航点 [英] highlight navigation dots while scrolling down on page

问题描述

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

Will try to explain this :) I have a navigation that scrolls to different anchors on the page. When the user is on one of the anchors the navigation shows an active link.

现在，我认为一个不错的效果是，假设用户位于页面顶部，单击将我们移至页面底部的链接，同时向下滚动之间的每个链接，滚动时突出显示.像个红绿灯.

Now i think that one nice effect would be if the user, lets say is on the top of the page, clicks on the link that moves us to the bottom on the page and while its scrolling down every link in between will be highlight when the scroll pass by. Like a stoplight.

我暂时有这个Jquery，但是它只在单击的链接上添加/删除了类. 关于我应该如何进行的任何想法?

I have this Jquery for the moment, but its only add/remove class on the clicked link. Any ideas on how I should go on ?

$(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

推荐答案

修改了代码以提高性能.

我做了一个JSFiddle，可以在这里添加我的内容

I made a JSFiddle that work here what I added

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

As you can see, I added the class "par" to all paragraph. JSFiddle

这篇关于向下滚动页面时突出显示导航点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！