Bootstrap 5 スクロールスパイ
- 前のページ BS5 トースト
- 次のページ BS5 オフキャンバス
Scrollspy
Scrollspyは、以下に基づいて使用されますスクロールナビゲーションリストのリンクが自動的に更新されます。
Scrollspy を作成する方法
以下は Scrollspy を作成する方法を示しています：
例
<!-- スクロール可能なエリア -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- ナビゲーションバー - <a> 要素は、スクロール可能なエリア内の特定の部分にジャンプするために使用されます -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">セクション 1</a></li>
...
</nav>
<!-- セクション 1 -->
<div id="section1">
<h1>セクション 1</h1>
<p>このページをスクロールして、スクロール中にナビゲーションバーを確認してください！</p>
</div>
...
</body>
例を説明します
を data-bs-spy="scroll" スクロール可能なエリアとして使用される要素（通常は <body> 要素を追加します）。
次に、 data-bs-target 属性、値が id またはナビゲーションバーのクラス名（.navbar）。これにより、ナビゲーションバーとスクロール可能なエリアが連携することを確実にします。
注意してください、スクロール可能な要素はナビゲーションバー内のリンク ID と一致する必要があります（<div id="section1"> 一致 <a href="#section1">）。
オプションの data-bs-offset 属性は、スクロール位置を計算する際に上部からオフセットするピクセル数を定義します。ナビゲーションバー内のリンクがスクロール可能な要素にジャンプする際に、アクティブ状態が早すぎると感じる場合に非常に役立ちます。デフォルト値は 10 ピクセルです。
相対的な位置が必要です。：data-bs-spy="scroll" と指定された要素には CSS ポジション 属性の値が "relative" に設定されている場合のみ正常に動作します。
- 前のページ BS5 トースト
- 次のページ BS5 オフキャンバス
