スクロールモニター（Scrollspy）ウィジェットブートストラップ

スクロールモニター（Scrollspy）プラグイン、自動的にナビゲーションウィジェットは自動的にスクロールバーの位置に基づいて、対応するナビゲーション・ターゲットを更新更新します。 あなたがスクロールすると、基本的な実装では、ナビゲーションバーに追加のスクロールバーの位置ベースの.activeクラスです。

あなたは、個々のプラグイン機能を参照したい場合は、scrollspy.jsを参照する必要があります。 または、 ブートストラッププラグインの概要章で述べたように、あなたはbootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照することができます。

使用法

あなたは、ナビゲーション・モニター・行動の先頭にスクロールを追加することができます。

• データ属性を使用して：あなたは、データスパイ= "スクロール"を追加する要素（通常は体）を聴きたいです。その後、ブートストラップ .nav部品属性データ、ターゲットと親要素のIDやクラスを追加します。それが正しく機能するために、あなたはIDのモニター・エレメントが存在するリンクしたいページの本文で一致したことを確認する必要があります。

  <ボディデータスパイ= "スクロール"データターゲット= "。ナビゲーションバー-例">
  ...
  <DIVクラス= "ナビゲーションバー-例">
  	<ULクラス= "NAV NAV-タブ">
  		...
  	</ UL>
  </ DIV>
  ...
  </ BODY>
  

• JavaScriptので：あなたは（）関数.scrollspyを呼び出して、聞くための要素を選択するために聞くためにJavaScript呼び出しをスクロールすることができます。

  。$（ 'ボディ'）scrollspy（{対象： '.navbar-例'}）
  

例

次の例では、データをスクロールを使用するプラグイン（Scrollspy）を監視属性を示しています。

結果は以下の通りであります：

オプション

データ属性またはJavaScriptを通過します。 次の表は、これらのオプションを示します：

ウェイ

$（ '[データ-スパイ= "スクロール"]'）。各（関数（）{
  変数$スパイ= $（この）.scrollspy（ 'リフレッシュ'）
}）

例

次の例では、.scrollspy（ 'リフレッシュ'）メソッドを示しています。

結果は以下の通りであります：

イベント

次の表は、モニターがイベントをスクロールするために使用することを示しています。 これらのイベントは時フック関数を使用することができます。

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // 执行一些动作...
})

例

次の例では、activate.bs.scrollspyイベントの使用方法を示しています。

結果は以下の通りであります：

より多くの例

水平スクロールリスニングを作成します。

次の例では、水平スクロールリスナーを作成する方法を示します。

垂直スクロールリスニングを作成する方法

次の例では、垂直スクロールリスナーを作成する方法を示します。