この記事では、主にJavaScriptプラグイン - リスニングのスクロールを学びます。
1。ケース
スクロールリスニングプラグインは、スクロールバーの位置に応じて、対応するナビゲーションマークを自動的に更新できます。このページをスクロールしてみて、左側のナビゲーションの変更を確認できます。
最初に実装されたコードをオンにすると、コードをテストして効果を確認できます。
<！Doctype html> <html> <head> <title> bootstrap </title> <meta name = "viewport" content = "width =" device-width、initial-scale = 1.0 "> <！ - bootstrap-> <link href =" css/boottrap.min.css <Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script> <src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> <style type = "text/css"> .scrollspy-example {height：200px;オーバーフロー：自動;位置：相対;境界線：1px固体赤; } </style> </head> <body> <div> <nav id = "navbar-example" role = "navigation"> <div> <button type = "data-toggle =" collapse "data-target ="。 </button> <a href = "＃">プロジェクト名</a> </div> <ul> <li> <a href = "＃fat">@fat </a> </li> <li> <a href = "＃mdo">@mdo </a> </li> <a href = " <b> </b> </a> <ul role = "menu" aria-labelledby = "navbardrop1"> <li> <a href = "＃one" tabindex = "-1"> 1 "> </a> </li> <li> tabindex = "-1"> 3 </a> </li> </ul> </li> </li> </li> </li> </div> </nav> <div dat-offset = "0" data-spy = "scroll" data-target = "＃navbar-example"> <h4 id = "fat" Pitchfork yr enim lo-fiがquiを完売する前に。 Tumblr農場からテーブル間の自転車の権利は何でも。 Anim Keffiyeh Carles Cardigan。 Velit Seitan McSweeneyのフォトブース3 Wolf Moon Irure。 Cosby Seater Lomo Jean Shorts、Williamsburg Hoodie Minimum QuiあなたはおそらくCardigan Trust Fund Culpa Biodiesel Wes Anderson Aestheticを聞いたことがないでしょう。ニヒルのタトゥーアキュサマス、クレジットの皮肉なバイオディーゼルkeffiyeh artisan ullamco結果。フリーガンベアアリケピダットマクスウィーニーのヴェロ。 cupidat four loko nisi、ea helvetica nulla carles。タトゥーのコスビーセーターフードトラック、マクスウィーニーのQuis非フリーガンビニール。 lo-fi wes Anderson +1 Sartorial。カールズ非美的運動Quis gentrify。ブルックリン脂肪化クラフトビール副キータール脱到達。 FAPクラフトビールの脱皮スケートボードEA。 Lomo Bicycle Rights Apisicing Banh Mi、Velit Ea Sunt Next Level Locavore Magna Veniaのシングルオリジンコーヒー。ハイライフIDビニール、エコーパーク結果Quis aliquip banh mi pitchfork。 VERO VHS EST脂肪調整。 conectetur nisi diy最小メッセンジャーバッグ。クレジット・エクス、持続可能なdeectusはファニーパックiPhoneを構成しています。 Eur VHS Elitを除き、Proident Shoreditch +1 Biodiesel Laborum Craft Beer。シングルオリジンコーヒーウェイファーラーIrure Four Loko、Cupidat Terry Richardson Master Cleanse。おそらくあなたは彼らのアートパーティーのファニーパック、タトゥーのNulla Cardiganの一時的な広告について聞いたことがないでしょう。 Proident Wolf Nesciunt Sartorial Keffiyeh eu banh Mi Sustainable。 Elit Wolf Boluptate、Lo-Fi EAポートランドは、4つのロコを売り切れました。 Locavore enim nostrud mlkshk Brooklyn nesciunt。 Pitchfork yr enim lo-fiがquiを完売する前に。 Tumblr農場からテーブル間の自転車の権利は何でも。 Anim Keffiyeh Carles Cardigan。 Velit Seitan McSweeneyのフォトブース3 Wolf Moon Irure。 Cosby Seater Lomo Jean Shorts、Williamsburg Hoodie Minimum QuiあなたはおそらくCardigan Trust Fund Culpa Biodiesel Wes Anderson Aestheticを聞いたことがないでしょう。ニヒルのタトゥーアキュサマス、信用皮肉なバイオディーゼルkeffiyeh artisan ullamco結果。 Sapiente SynthID Asmanda。 locavore sed helvetica cliche irony、thundercatsあなたはおそらくそれらについて聞いたことがないでしょう労働エリットは、売り切れになる前の場所、テリー・リチャードソンのプロプリデントブランチnesciunt quis cosbyセーターPariatur keffiyeh ut helvetica artisan。カーディガンクラフトビールSeitan Readymade Velit。 VHS Chambray Laboris一時的なVeniam。 Anim Mollit Minimal Commodo Ullamco Thundercats。 </p> </div> </div> <script src = "js/jquery-2.0.3.min.js"> </script> <script src = "js/bootstrap.min.js"> </scrip> </body> </html>使用法1-データ属性を介して
（通常）聞く必要があるが、divに追加する必要があるページ要素のためにDIVに追加することにより、コードを自分で見ることができます。次に、属性data-spy = "scroll"をdivに追加して、スクロールリスニング機能を上部ナビゲーションバーに簡単に追加します。次に、データターゲット属性を追加します。この属性の値は、任意のブートストラップの.NAVコンポーネントの親要素のIDまたはクラスです。
次のようにコードをコピーします
...........
</div>
ナビゲーションリンクアドレスには、対応するターゲットが必要です
ナビゲーションバーのリンクアドレスには、同じID値を持つ対応するページ要素が必要です。
使用量2-- javaScriptを介して
JavaScriptを介してリスニングのスクロールを開始します：
<script type = "text/javascript"> $（function（）{$（ '。scrollspy-example'）。scrollspy（{ターゲット： '＃navbar-example'}）;}）</script>スタイルクラスをScrollspy-Example Divとして配置して、データターゲットプロパティを削除します。これにより、マウスホイールを切り替えることもできます。
2。メソッド
.scrollspy（ 'Refresh'）
スクロールリスニングプラグインを使用する場合、次のように、ページのDOMからページ要素が追加または削除されるたびに、この方法を呼び出す必要があります。
コードコードを次のようにコピーします：$（ '[data-spy = "scroll"]'）
3。オプション
オプションは、データプロパティまたはJavaScriptを渡すことができます。データ属性の場合、データオフセット= ""など、データの後にオプション名を配置する必要があります。
4。イベント
<script type = "text/javascript"> $（ '＃navbar-example'）
最後に、注：もちろん、スクロールモニタリングの内容にスクロールバーを追加する必要があります。つまり、事前にスタイルを追加する必要があります。
<style type = "text/css"> .scrollspy-example {height：200px;オーバーフロー：自動;位置：相対;境界線：1px固体赤; } </style>Divコンテンツに一定の高さを与えます。
上記は、関連するコンテンツのスクロールと監視のブートストラップの学習ノートです。それでもブートストラップの学習を続けたい場合は、ここをクリックして学習を続けることができます。それがあなたの学習に役立つことを願っています。また、wulin.comからよりエキサイティングなコンテンツに注意を払い続けることを願っています。