デモの構成

スクロールスパイのデモ : 3重ネストしたナビゲーションを用いた例。

• コンテナ div.container
  • 左 div.col-4.col-lg-3
    • ナビゲーション nav.nav.nav-pills.flex-column 属性
      • 属性 id="scrollspy-demo"
      • アイテム a.list-group-item 属性
        • 属性 href="#{位置ID}"
      • またはネストしたナビゲーション nav.nav.nav-pills.flex-column
        • (内部には id 不要)
        • アイテム a.list-group-item 属性
          • 属性 href="#{位置ID}"
          • インデント .ml-(4|5) (⇒ 空白ユーティリティ)
        • 任意レベルのネスト可能
  • 右 div.col-8.col-lg-9 : スクロールするコンテンツ(この場所) 属性
    • 属性 data-spy="scroll"
    • 属性 data-target="#scrollspy-demo"
    • 属性 data-offset="10" (⇒ 注)
    • スタイル style="height: 32rem; overflow-y: scroll;"
    • 位置検出する要素 属性
      • ID id="{位置ID}" を設定

以下はスクロール用ダミーコンテンツ。ヘッダにはそれぞれ id="{位置ID}" が設定されており、スクロールスパイがスクロール検出と表示の連動を行う。

Pictures

Picture 1

Picture 1-1

Picture 1-2

Picture 1-3

Picture 2

Picture 2-1

Picture 2-2

Picture 2-3

Slides

Slide 1

Slide 2

Slide 3