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

GSAP JavaScript フロントエンド

こんにちは、ナカムラです。
今回はページ内リンクのナビゲーションに、カレントのスタイルをつける方法のご紹介をします。
GSAPのscrollTriggerを使用します。

GSAPのscrollTriggerについてはこちら https://greensock.com/docs/v3/Plugins/ScrollTrigger

DEMO

See the Pen ページ内スクロールのナビゲーションにカレントするJavaScript（GSAP） by Nakamura (@takayo-nakamura) on CodePen.

右側のナビゲーションから、ページ内の各セクションにスクロールするページです。
新規ウィンドウで開いた方がみやすいのでこちらからどうぞ。
表示しているセクションに該当するナビゲーションメニューを赤くして、現在地がわかりやすいようにしています。

※GSAPはJavaScriptの設定画面で読み込んでいます。ローカル環境で開発する場合は読み込みの記述が必要になります。

変数の設定

let navItem
let sectionItem

for (let i = 1; i < 4; i++) {
  navItem = '#navItem' + i
  sectionItem = '#section' + i

 // 省略

}

navItem：カレントを付与する対象となるナビゲーションメニューのID名を入れます。
sectionItem：スクロールの位置を判定する対象の要素のID名を入れます。

連番で命名することで、GSAPの設定を一つの記述で対応することが可能です。

GSAPの設定

  ScrollTrigger.create({
      // markers: true,
      trigger: sectionItem,
      start: 'top center',
      end: 'bottom center',
      toggleClass: {
        targets: navItem,
        className: 'is-active'
      }
   })

scrollTriggerの対象はsectionItemです。
sectionItemの要素のtopからbottomまで、ページの中央に存在する間がtrueとなります。
※コメントアウトしているmarkers: true,を付与すると、start・endの設定の状態が可視化されます。
（検証用プロパティのため最終的には削除してください）

scrollTriggerの条件に合えばクラスを付与し、条件に合わなくなればクラスを外します。

      // 省略
      toggleClass: {
        targets: navItem,
        className: 'is-active'
      }

あとはスタイルシートでis-activeに対してスタイルをつけていけば変化するようになります。

まとめ

GSAPを使うと簡単に実装することができました。
キャンペーンなど、ページが長くなりがちなLPや、スマホメインのサイトを作る際のPC用画面などに活用できるかと思います。
ナビゲーション以外にも、スクロールに応じて背景や装飾を変えるなど、活用方法はさまざまです。
ぜひ使ってみてください。