【Vanilla JS】エレベーターナビゲーション実装(Intersection Observer API使用)

[ ID : 7911 ]
シルバー
【Vanilla JS】エレベーターナビゲーション実装(Intersection Observer API使用)
実装目安
3分

概要

Intersection Observer APIを使用してエレベーターナビゲーションを実装する方法を紹介。

用途・要件

  • スクロールに合わせて、現在どのセクションにいるのかを判定し、対応するナビゲーションのカレントを切り替える。
  • 対象のセクションが画面の半分の高さ到達した際に、カレントを切り替える。
  • 対象のセクションにはid属性を設定する。
  • Intersection Observer APIを使用。

検証ブラウザ

  • Google Chrome(最新)
  • Microsoft Edge(最新)
  • Firefox(最新)
  • Safari(最新)

注意事項

  • ※DEMOプレビュー上で正常に動作しないため、本記事にDEMOエリアはございません。ソースコードをローカル環境に移設してご確認ください。

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

関連記事

全ての記事を見る

KONOCODEのメリット 無料会員登録