当它在滚动时点击屏幕顶部时获取带有类.waypoint的元素的id

Question

我有一个带有一系列链接的导航栏，可以将窗口滚动到页面上的各个锚点（或路标点）。我还需要的是当手动滚动窗口时，我想基于导航点击屏幕顶部的方式切换导航栏中的链接类（到.active）。我的航点基本如下：

<span class="waypoint" id="link1"></span>

我目前正在使用jQuery。

我希望这是有道理的！

Answer 1

你去吧

DEMO

$(window).scroll(function() {
    var waypoint = $(".waypoint").not(".seen").first();
    var scrollTop = $(window).scrollTop();

    // change to active 0-10 pixels 
    if (scrollTop >= waypoint.offset().top && scrollTop <= waypoint.offset().top+10) {
        waypoint.addClass("active");
    }
    if (scrollTop > waypoint.offset().top+10) {
        waypoint.addClass("seen");
        waypoint.removeClass("active");
    }
});

Answer 2

您是否考虑过使用此功能？

http://getbootstrap.com/javascript/#scrollspy