カレントセクション

スクロールすると、ビューポート中央付近に入ったセクションに応じてナビ項目に is-current-section が付きます。

概要

このデモでは、_nav-current-section.js により、監視対象のセクション（.js-section）がビューポート中央付近に入ったタイミングで、対応するナビ項目（data-section-id）に is-current-section クラスが付与されます。

特徴

IntersectionObserver API を使用しており、rootMargin: '-50% 0px' により「画面中央付近」を基準にカレントを判定しています。長いページや LP のナビで「今どのブロックにいるか」をハイライトする用途に向いています。

料金

セクション側には class="js-section" と id を、ナビ側の li には data-section-id="セクションのid" を付与してください。同一ページ内に .js-section が1つもない場合はスクリプトは何も実行しません。

お問い合わせ

カレント表示の見た目は CSS で自由に調整できます。このデモではナビリンクに下線と太字を付けています。必要に応じて .is-current-section 用のスタイルを追加してください。