jQuery

ページ内スクロールのナビゲーションにカレントを付与する

・デモ

サイドカラムのナビゲーションからページ内の各セクションにスクロールするページ

メインコンテンツまでスクロールするとサイドバーが追従して、現在地を示すためのナビゲーションが表示される

HTML
                  


  

    
section01

    
この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。

  

  

    
section02

    
この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。

  

  

    
section03

    
この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。
jQuery
                  
$(function () {

  $(window).on('load scroll resize', () => {
    const nav = $('.js-location-nav'),
      //ナビゲーションの位置を取得
      navPosition = nav.offset().top,
      //現在のスクロール位置を取得
      scroll = $(window).scrollTop();

    //ナビゲーションの位置までスクロールしたか判定
    if (scroll >= navPosition) {
      const content = $('.js-location-content section');

      //コンテンツごとに繰り返し処理
      content.each(function (i, e) {
        //コンテンツの開始位置を取得
        const target = $(this).offset().top,
          //コンテンツの終了位置を取得
          targetPosition = target + $(this).innerHeight(),
          //コンテンツのID属性を取得
          id = $(e).attr('id');

        //該当するコンテンツまでスクロールしているか判定　＆＆ 該当するコンテンツを通り過ぎたか判定
        if (scroll >= target && scroll < targetPosition) {
          //該当するhref属性にクラスを付与
          nav.find('a[href^="#' + id + '"]').addClass('is-current');
        } else {
          //該当しないhref属性はクラスを削除
          nav.find('a[href^="#' + id + '"]').removeClass('is-current');
        }
      });
    }
  });

});