JavaScript（脱jQuery）

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

・デモ

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

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

HTML
                  


  

    
section01

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

  

  

    
section02

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

  

  

    
section03

    
この文章はダミーです。この文章はダミーです。この文章はダミーです。この文章はダミーです。
javascript
                  
document.addEventListener('DOMContentLoaded', () => {
  const nav = document.querySelector('.js-location-nav');
  const sections = document.querySelectorAll('.js-location-content section');

  function onScroll() {
    const navPosition = nav.getBoundingClientRect().top + window.scrollY;
    const scroll = window.scrollY;

    // ナビゲーションの位置までスクロールしたか判定
    if (scroll >= navPosition) {
      sections.forEach(section => {
        const targetTop = section.offsetTop;
        const targetBottom = targetTop + section.offsetHeight;
        const id = section.id;
        const link = nav.querySelector(`a[href="#${id}"]`);

        if (scroll >= targetTop && scroll < targetBottom) {
          link.classList.add('is-current');
        } else {
          link.classList.remove('is-current');
        }
      });
    }
  }

  // スクロール・リサイズ・ロード時に実行
  window.addEventListener('scroll', onScroll);
  window.addEventListener('resize', onScroll);
  window.addEventListener('load', onScroll);
});