jquery - 当滚动到屏幕顶部时，获取具有类 .waypoint 的元素的 id

Question

我有一个带有一堆链接的导航栏，这些链接将窗口滚动到页面上的各种锚点（或航点）。我还需要的是当手动滚动窗口时，我想根据哪个航路点到达屏幕顶部来切换导航栏中的链接类别（到.active）。我的航点基本上如下：

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

我目前正在为此使用 jQuery。

我希望这是有道理的！

Answer 1

你有没有考虑过使用这个？

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

Answer 2

Here you go

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");
    }
});