ScrollSpy

http://getbootstrap.com/javascript/#scrollspy

scrollspy.js

ナビゲーションバーでの例
使用方法
メソッド
オプション
イベント

ナビゲーションバーでの例

ScrollSpyプラグインは、スクロール位置を基にして、自動的にナビゲーション対象を更新します。下記の例の領域をスクロールして、ナビゲーションのリンクのactiveクラスが変更されることを確認してください。ドロップダウンのサブメニューも、どうように(activeクラスが移ることで)ハイライトされます。

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

使用方法

Bootstrapのナビゲーションが必要
最新のScrollspyでは適切なactiveリンクのハイライトのために、 Bootstrapのナビゲーション(nav)コンポーネントの使用が必要になります。

解決可能なID対象が必要
ナビゲーションバーのリンクは、解決可能なID対象を持たなければいけません。例えば、<a href="#home">home</a>は、 <div id="home"></div>のような何かしらのものに対応しなければいけません。

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

相対位置(position: relative;)が必要

実装方法を問わず、ScrollSpyする要素上でposition: relative;の使用が必要となります。ほとんどのケースで、これは<body>となります。 <body>以外の要素上でScrollSpyする場合は、 height一式を持ち、overflow-y: scroll;が適用されていることを確認してください。

data属性を使用

トップバーのナビゲーションにScrollSpyの動作を簡単に追加するには、 data-spy="scroll"をScrollSpyさせたい要素へ追加します。(ほとんどの場合、これは<body>になります) 次に、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' })

メソッド

`.scrollspy('refresh')`

ScrollSpyを、DOMから要素の追加または削除を行うような処理と混合して使用する場合、次のようなrefreshメソッドの呼び出しが必要になります。

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

オプション

オプションはdata属性またはJavaScriptを介して渡すことが可能です。 data属性であれば、オプションの名前をdata-offset=""のようにして、data-の後ろに追加します。

名前	型	デフォルト	説明
offset	number	10	スクロール位置の計算時に、topからのオフセットのピクセル数を指定します。

イベント

イベントの型	説明
activate.bs.scrollspy	ScrollSpyによって新しい項目が有効化されると、このイベントが発火します。

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

docs CC BY 3.0

このページは、ページトップのリンク先のBootstrap公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。