GitHubで表示

Scrollspy

スクロール位置に基づいてBootstrapのナビゲーションまたはリストグループコンポーネントを自動的に更新し、ビューポートで現在アクティブなリンクを示します。

仕組み

Scrollspyが正しく機能するためにはいくつかの要件があります。

  • JavaScriptをソースからビルドしている場合は、util.jsが必要です。
  • Bootstrapのナビゲーションコンポーネントまたはリストグループで使用する必要があります。
  • Scrollspyでは、監視対象の要素（通常は<body>）にposition: relative;が必要です。
  • <body>以外の要素を監視する場合は、heightを設定し、overflow-y: scroll;を適用してください。
  • アンカー(<a>)は必須で、そのidを持つ要素を指す必要があります。

正しく実装されると、ナビゲーションまたはリストグループはそれに応じて更新され、関連するターゲットに基づいて.activeクラスが1つの項目から次の項目に移動します。

ナビバーの例

ナビバーの下の領域をスクロールして、アクティブなクラスの変化を確認してください。ドロップダウン項目もハイライトされます。

@fat

Scrollspyの例のプレースホルダーコンテンツです。あなたは最高の建築物を持っています。パスポートスタンプ、彼女はコスモポリタンです。上品で、新鮮で、猛烈で、ロックオンしました。いつかあなたを失うことになるとは思っていませんでした。彼女はあなたの心を食い尽くします。あなたのキスは宇宙的で、あらゆる動きが魔法です。私が言いたいのは、彼女こそがそうだってことです。愛する皆さん、旅に出ましょう。まるで7月4日のように夜を独り占めにしてください！しかし、あなたはむしろ無駄に過ごしたいのでしょう。

@mdo

Scrollspyの例のプレースホルダーコンテンツです。なぜなら彼女はミューズでありアーティストだからです。（これが私たちのやり方）だから魔法と戯れたいのでしょう。だから、すべてを私に捧げる前に、よく確かめてください。私は歩いている、私は空気の上を歩いている（今夜）。おしゃべりはやめて、全部聞いた、行動で示すときが来た。

1

Scrollspyの例のプレースホルダーコンテンツです。彼女が持つ国際的な笑顔で、あなたを何マイルも高く、高く連れて行きます。私のベッドに見知らぬ人がいて、頭がガンガンしています。ああ、だめだ。別の人生では、私はあなたを引き留めるでしょう。なぜなら私は、私は何でもできるからです。戴冠式の戦いのために着飾ります。昔は両親のお酒を盗んで屋根に登っていた。引き締まった、日焼けした、準備万端、盛り上がれ、激しくなるから。彼女の愛は麻薬のようなものです。私は選択肢があったことを忘れていたのでしょう。

2

Scrollspyの例のプレースホルダーコンテンツです。大きな風船を出す時が来ました。私は歩いている、私は空気の上を歩いている（今夜）。ああ、私たちはクレジットカードを使い果たしてバーを追い出された。おい、飲み放題のサービスを受けて、家賃のお金を払っているガキどもに敬意を表する。私はあなたの心を私の体にピッタリフィットしたジーンズの中でドキドキさせるでしょう。もしチャンスがあれば、彼女をキープした方がいい。おい、飲み放題のサービスを受けて、家賃のお金を払っているガキどもに敬意を表する。

3

Scrollspyの例のプレースホルダーコンテンツです。もしあなたが踊りたいなら、すべてが欲しいなら、私があなたに電話するべき女の子だと知っているでしょう。嵐の中を歩いていくでしょう。だからあなたの誕生日用の服を着させてください。逃した人。先週の金曜日の夜、ええ、私たちは法律を破ったと思う、いつもやめようと言うのに。なぜなら彼女は少しヨーコであり、少し「ああ、だめだ」だから。私はアゴを落とさせ、目を飛び出させ、頭を回転させ、体をショックさせたい。ああ、私たちはクレジットカードを使い果たしてバーを追い出された。

そして、念のために、さらにプレースホルダーコンテンツを追加します。

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

ネストされたナビゲーションの例

Scrollspyは、ネストされた.navにも対応しています。ネストされた.navが.activeの場合、その親も.activeになります。ナビバーの隣の領域をスクロールして、アクティブなクラスの変化を確認してください。

項目 1

Scrollspyの例のプレースホルダーコンテンツです。これは項目1に関連しています。彼女が持つ国際的な笑顔で、あなたを何マイルも高く、高く連れて行きます。私のベッドに見知らぬ人がいて、頭がガンガンしています。ああ、だめだ。別の人生では、私はあなたを引き留めるでしょう。なぜなら私は、私は何でもできるからです。戴冠式の戦いのために着飾ります。昔は両親のお酒を盗んで屋根に登っていた。引き締まった、日焼けした、準備万端、盛り上がれ、激しくなるから。彼女の愛は麻薬のようなものです。私は選択肢があったことを忘れていたのでしょう。

項目 1-1

Scrollspyの例のプレースホルダーコンテンツです。これは項目1-1に関連しています。あなたは最高の建築物を持っています。パスポートスタンプ、彼女はコスモポリタンです。上品で、新鮮で、猛烈で、ロックオンしました。いつかあなたを失うことになるとは思っていませんでした。彼女はあなたの心を食い尽くします。あなたのキスは宇宙的で、あらゆる動きが魔法です。私が言いたいのは、彼女こそがそうだってことです。愛する皆さん、旅に出ましょう。まるで7月4日のように夜を独り占めにしてください！しかし、あなたはむしろ無駄に過ごしたいのでしょう。

項目 1-2

Scrollspyの例のプレースホルダーコンテンツです。これは項目1-2に関連しています。彼女の愛は麻薬のようなものです。私のガールフレンドはみんなヴィンテージシャネルのベイビーです。モーテルに泊まってシーツで砦を建てました。なぜなら彼女はミューズでありアーティストだからです。（これが私たちのやり方）だから魔法と戯れたいのでしょう。だから、すべてを私に捧げる前に、よく確かめてください。私は歩いている、私は空気の上を歩いている（今夜）。おしゃべりはやめて、全部聞いた、行動で示すときが来た。彼女を捕まえることができれば。ハチのように刺して私は自分のストライプを獲得した。

項目 2

Scrollspyの例のプレースホルダーコンテンツです。これは項目2に関連しています。謝罪は必要ありません。今は恐れはない、手放して自由に過ごすだけ、私はあなたを無条件に愛します。先週の金曜日の夜。恥ずかしがり屋はやめて、きっと美しいよ。高校卒業後の夏、私たちが初めて出会ったとき。なぜなら彼女はミューズでありアーティストだからです。え？ちょっと待って。いや、いや、いや、いや。私が例外だと思っていた。

項目 3

Scrollspyの例のプレースホルダーコンテンツです。これは項目3に関連しています。噂によると、あなたは何か私に見せるものを持っている、私に。このお金ではタイムマシンを買うことはできません。毎日あなたの誕生日みたいにしてください。それで私たちは大通りに出ます。あなたが私をそうさせるやり方で、私はまるでティーンエイジャーの夢を生きているように感じます。おしゃべりはやめて、全部聞いた、行動で示すときが来た。噂によると、あなたは何か私に見せるものを持っている、私に。たいしたことじゃない、たいしたことじゃない、たいしたことじゃない。

項目 3-1

Scrollspyの例のプレースホルダーコンテンツです。これは項目3-1に関連しています。ねぇ、あなたこれをやってみる？これはたいしたことじゃない。ええ、彼女の飛行機に乗れたらラッキーだよ。まるで7月4日のように夜を独り占めにしてください！爆弾が落ち始めたら最前線に立つ。だから、すべてを私に捧げる前に、よく確かめてください。

項目 3-2

Scrollspyの例のプレースホルダーコンテンツです。これは項目3-2に関連しています。あなたはオリジナルで、置き換えることはできません。一晩中、彼らはあなたの歌を流している。カリフォルニアガールズ、私たちは否定できない。鳥かごのない鳥のように。今は恐れはない、手放して自由に過ごすだけ、私はあなたを無条件に愛します。私は壁に書かれている文字が見える。あなたは世界中を旅することができますが、黄金の海岸に匹敵するものはありません。

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

リストグループの例

Scrollspyは、.list-groupにも対応しています。リストグループの隣の領域をスクロールして、アクティブなクラスの変化を確認してください。

項目 1

Scrollspyリストグループの例のプレースホルダーコンテンツです。これは項目1に関連しています。謝罪は必要ありません。今は恐れはない、手放して自由に過ごすだけ、私はあなたを無条件に愛します。先週の金曜日の夜。恥ずかしがり屋はやめて、きっと美しいよ。高校卒業後の夏、私たちが初めて出会ったとき。なぜなら彼女はミューズでありアーティストだからです。え？ちょっと待って。私が例外だと思っていた。

項目 2

Scrollspyリストグループの例のプレースホルダーコンテンツです。これは項目2に関連しています。ええ、彼女は自分のリズムで踊る。ああ、だめだ。あなたは最高になれたはずだった。だって、ベイビー、あなたは花火なんだから。たぶん、すべてのドアが閉まっている理由。心を開いて、始めさせてください。とてもシックで、ええ、彼女はクラシックです。

項目 3

Scrollspyリストグループの例のプレースホルダーコンテンツです。これは項目3に関連しています。私たちはどんどん高くなっていく。いつも一緒に、私たちは約束を交わした。私は空を歩いている。誰かがあなたのタトゥーを消したと言った。今、私は蝶のようにふわふわと浮かんでいる。引き締まった、日焼けした、準備万端、盛り上がれ、激しくなるから。だって一度あなたのものになったら、一度あなたのものになったら。光に火をつけて輝かせるしかない！それで私たちは大通りに出ます。あなたはこれまで感じたことがありますか、とても紙のように薄く感じます。私にはすべてが見える、今見える。

項目 4

Scrollspyリストグループの例のプレースホルダーコンテンツです。これは項目4に関連しています。高校卒業後の夏、私たちが初めて出会ったとき。今は恐れはない、手放して自由に過ごすだけ、私はあなたを無条件に愛します。太陽にキスされた肌はとても熱く、アイスキャンディーを溶かしてしまいそうです。この愛はあなたを浮揚させるでしょう。

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

使い方

データ属性による

トップバーナビゲーションにscrollspyの動作を簡単に追加するには、監視対象の要素（通常は<body>）にdata-spy="scroll"を追加します。次に、Bootstrapの.navコンポーネントの親要素のIDまたはクラスをdata-target属性で追加します。

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

JavaScriptによる

CSSでposition: relative;を追加したら、JavaScriptでscrollspyを呼び出します

$('body').scrollspy({ target: '#navbar-example' })

解決可能なIDターゲットが必要

ナビバーのリンクには、解決可能なidターゲットが必要です。たとえば、<a href="#home">ホーム</a>は、DOM内の<div id="home"></div>のようなものに対応する必要があります。

非表示:visibleのターゲット要素は無視される

jQueryによると:visibleでないターゲット要素は無視され、対応するナビゲーション項目がハイライトされることはありません。

メソッド

.scrollspy('refresh')

DOMの要素を追加または削除する際にScrollspyを使用する場合、次のようにrefreshメソッドを呼び出す必要があります。

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

.scrollspy('dispose')

要素のScrollspyを破棄します。

オプション

オプションは、データ属性またはJavaScriptを介して渡すことができます。データ属性の場合、オプション名をdata-に追加します。例えば、data-offset=""のようにします。

名前 型 デフォルト 説明
offset number 10 スクロール位置を計算する際に、上端からのオフセットピクセル数。
method string auto 監視対象の要素がどのセクションにあるかを検索します。autoはスクロール座標を取得する最適な方法を選択します。offsetはjQueryのoffsetメソッドを使用してスクロール座標を取得します。positionはjQueryのpositionメソッドを使用してスクロール座標を取得します。
target string | jQueryオブジェクト | DOM要素 Scrollspyプラグインを適用する要素を指定します。

イベント

イベントタイプ 説明
activate.bs.scrollspy Scrollspyによって新しい項目がアクティブ化されるたびに、このイベントがスクロール要素で発生します。 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})