Bootstrap 4 Scrollspy（Advanced）
Bootstrap 4 Scrollspy
Scrollspyは、スクロール位置に基づいてナビゲーションリスト内のリンクを自動的に更新するために使用されます。
Scrollspyを作成する方法
次の例は、scrollspyを作成する方法を示しています。
例
<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav
class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</body>
例の説明
data-spy="scroll"スクロール可能領域として使用する必要がある要素に追加します（多くの場合、これは<body>要素です）。
data-target次に、ナビゲーションバーのidまたはクラス名の値を使用して属性を追加します（ .navbar）。これは、ナビゲーションバーがスクロール可能な領域に接続されていることを確認するためです。
スクロール可能な要素は、ナビゲーションバーのリストアイテム内のリンクのIDと一致する必要があることに注意してください（<div id="section1">一致<a href="#section1">）。
オプションのdata-offset属性は、スクロールの位置を計算するときに上からオフセットするピクセル数を指定します。これは、スクロール可能な要素にジャンプするときに、ナビゲーションバー内のリンクがアクティブ状態を変更するのが早すぎたり早すぎたりする場合に役立ちます。デフォルトは10ピクセルです。
相対配置が必要： data-spy = "scroll"の要素には、正しく機能するために「relative」の値を持つCSSpositionプロパティが必要です。
Scrollspy垂直メニュー
この例では、Bootstrapの垂直ナビゲーションピルをメニューとして使用します。
例
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3
col-4" id="myScrollspy">
<ul class="nav nav-pills
flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
...
</ul>
</nav>
<div class="col-sm-9
col-8">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the
menu while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
完全なブートストラップScrollspyリファレンス
すべてのscrollspyオプション、メソッド、およびイベントの完全なリファレンスについては、 Bootstrap JSScrollspyリファレンスにアクセスしてください。