デモの構成

スクロールスパイのデモ : リストグループを用いた例。

• コンテナ div.container : グリッドを用い左右にレイアウト
  • 左 div.col-4.col-lg-3 : ナビゲーションバー + リストグループ
    • ナビゲーションバー nav.navbar.navbar-light.bg-light.mb-2
      • span.navbar-brand
        • テキスト Scrollspy Demo (3)
    • リストグループ div.list-group 属性
      • 属性 id="scrollspy-demo"
      • アイテム a.list-group-item 属性
        • 属性 href="#{位置ID}"
  • 右 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}" が設定されており、スクロールスパイがスクロール検出と表示の連動を行う。

Picture 1

Picture 2

Picture 3

Slide 1

Slide 2

Slide 3