Bootstrap 4 tutorial

スクロールスパイ: ナビゲーションバーへの設定

デモの構成

スクロールコンテント body 属性
- 属性 data-spy="scroll"
- 属性 data-target="#scrollspy-demo"
- 属性 data-offset="56" (⇒ 注1)
- ナビゲーションバー(上部固定) nav.navbar.fixed-top.navbar-light 属性
  - 属性 id="scrollspy-demo"
  - スタイル(背景を半透明) style="background: rgba(222,222,222,0.6);" (⇒ 注2)
  - タイトル Scrollspy demo (1) (⇒ ナビゲーションバー - ブランド表示)
  - アイテムリスト ul.nav.nav-pills (⇒ ナビゲーションバー - ナビゲーション)
    - アイテム li.nav-item
      - リンク a.nav-link 属性
        
        属性(例) href=`#about`
        
        テキスト(例) About
    - ドロップダウン (Slide▾ ) li.nav-item.dropdown (⇒ ドロップダウン)
- コンテナ div.container
  - 位置検出する要素属性
    - ID id="{位置ID}" を設定する

注1: data-offset="56" はナビゲーションバーの高さ(px)。本ページはトップ固定ナビゲーションバーがあるため、スクロール位置計算の基準点がスクロールバーのすぐ下になるようにオフセット調整している。

注2: ハッシュ # によるページ内ジャンプはナビゲーションバーを考慮せず常にページ先頭にスクロールするため、ターゲットがバーに隠れてしまう。この問題解決はやや難しい(オフィシャルデモの動作も同じで、解決にはたぶん iframe が必要)。そこで妥協策として半透明バーを用い隠れた部分が透けて見えるようにして問題を緩和している。

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

Bootstrap 4 tutorial

デモの構成

Picture 1

Picture 2

Picture 3

Slide 1

Slide 2

Slide 3