jquery - スクロール時に画面の上部に到達したときに、クラス.waypointを持つ要素のIDを取得します

Question

ウィンドウをページ上のさまざまなアンカー（またはウェイポイント）にスクロールするリンクの束を備えたナビゲーションバーがあります。さらに必要なのは、ウィンドウを手動でスクロールするときに、画面の上部に当たるウェイポイントに基づいて、ナビゲーションバーのリンクのクラスを（.activeに）切り替えたいことです。私のウェイポイントは基本的に次のとおりです。

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

私は現在、これにjQueryを使用しています。

これが理にかなっていることを願っています！

Answer 1

これを使うことを考えましたか？

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

Answer 2

どうぞ

デモ

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