スクロール監視（Scrollspy）プラグイン、つまり、ナビゲーションプラグインの自動更新は、スクロールバーの位置に応じて対応するナビゲーションターゲットを自動的に更新します。その基本的な実装は、スクロール時のスクロールバーの位置に基づいて、ナビゲーションバーにアクティブクラスを追加することです。
プラグインの機能を個別に参照する場合は、scrollspy.jsを参照する必要があります。または、bootstrapプラグインの概要章で述べたように、bootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照できます。
1。使用法
スクロールリスニング動作をトップナビゲーションに追加できます。
1。データ属性を介して：聴取したい要素（通常はボディ）にdata-spy = "scroll"を追加します。次に、bootstrap .navコンポーネントまたはクラスのプロパティの親要素のIDで属性データターゲットを追加します。適切に機能するためには、聴きたいリンクのIDに一致する要素がページのボディにあることを確認する必要があります。
<body data-spy = "scroll" data-target = "。vavbar-example"> ... <div> <ul> ... </ul> </div> ... </body>
2。JavaScriptを介して：JavaScriptを介してスクロール監視を呼び出し、聴く要素を選択し、.scrollspy（）関数を呼び出すことができます。
$（ 'body'）。scrollspy（{target： '.navbar-example'}）
2。スクロール監視
スクロールリスニングプラグインは、スクロールバーが配置されている位置に基づいてナビゲーションアイテムを自動的に更新し、ハイライトされたナビゲーションアイテムを表示します。
// <nav id = "nav"> <a href = "＃"> web Development </a> <ul> <li> <li> <a href = "＃html5"> html5 </a> </li> <li> <a href = "＃bootstrap"> boottrap </a> <span> </span> </a> <ul> <li> <a href = "＃jquery"> jquery </a> </li> <li> <a href = "＃yui"> yui </a> </li> <li> <a href = "＃extjs"> extjs </a> </li> data-offset = "0" data-target = "＃nav" data-spy = "scroll" style = "height：" height：200px; overflow：auto; position：relative; padding：0 10px; "> <h4 id =" html5 "> html5 </h4> <p> HTML5およびその他の基準は残されました。 Web Standardization Movementの開発を促進するために、一部の企業は力を合わせてWeb Hypertext Application Technology Working Group（HyperTed Technology Working Group-WhatWG-WhatWGのWeb組織を確立しました。 id = "Bootstrap> Bootstrapは、Twitterからのフロントエンドフレームワークです。 Bootstrapは、Dynamic CSS言語ではあまり発売されていないエレガントなHTMLとCSSの仕様を提供し、NASAのMSNBC（Microsoft NBC）を含む人気のあるオープンソースプロジェクトを提供しています。 [3] </p> <h4 id = jquery </h4> <p> jqueryは、プロトタイプの後の別の優れたJavascriptライブラリであり、CSS3と互換性があり、さまざまなブラウザー、FF 1.5+、Saf 2.0+ IE6/7/8のブラウザは、ユーザーがより便利にHTML（標準的なマークアップ言語でアプリケーション）を処理し、アニメーション効果を達成することができますつまり、コマンドを呼び出すためにJSの束を挿入する必要はありません。雨が降った後、多くの優れたフレームワークがデスクトップブラウザと、開発の両方のフレームワークを促進していますid = "extjs"> extjs </h4> <p> extjsは、RIA、つまり豊富なクライアントのAjaxアプリケーションを使用することができます。 ExtjsはもともとYuiテクノロジーに基づいており、Javaswingやその他のメカニズムを参照することにより、視覚的なコンポーネントを整理しました
下の図に示すように、2つの重要な属性があります。
PS：メニューと簡単な時間で、データターゲットは安定して、監視の強調表示を設定せずに理解することもできます。ただし、複数のナビゲーションのときにそれらのいずれかを関連付けない場合、エラーが発生するため、通常は追加する必要があります。
JavaScriptスクリプトメソッドを使用する場合、データ - *を削除し、スクリプト属性の定義：オフセット、スパイ、およびターゲットを使用できます。特定の方法は次のとおりです。
//プロパティ$（ '＃content'）。scrollspy（{offset：0、target： '#nav'、}）;新しいエントリに切り替えるイベントもあります。
//イベントはナビゲーションに縛られています
$（ '＃nav'）。
アラート（ 'このイベントは、新しいエントリがアクティブになった後にトリガーされます！'）;
}）;
スクロールリスニングでコンテナDOMを更新する方法もあります。
// HTMLパーツ
<section> <h4 id = "html5"> html5 <a href = "＃" onclick = "removesec（this）">これを削除</a> </h4> <p> ... </p> </section>
//コンテンツを削除するときは、ナビゲーションの監視の不整合を避けるためにDOMを更新します
関数removesec（e）{$（e）.parents（ '。sec'）。remove（）; $（ '＃content'）。scrollspy（ 'refresh'）;}注：この方法は、データ - *宣言的なものを使用する必要があります。
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。