この記事では、すべての人が学習できるブートストラップスクロール監視を紹介します。特定のコンテンツは次のとおりです
スクロールバーのスクロールを伴うスクロール監視、リストアイテムは常に切り替えられ、アクティブ化されます。
<！ - id = "メニュー"は、data-target = "＃menu" - > <！ - navbar navbar-inner navbar-fixed-top固定ナビゲーションバーのリスニングオブジェクトです。 Dropdown-Menu Dropdown-Menu Call Pulldown動作 - > <a href = "＃" data-toggle = "ドロップダウン"ドロップダウンメニュー<b> </b> </a> <ul> <li> <li> <li> <li> </a> </li> <li> <a href = "＃4" 5 </a> </li> </li> </li> </div> </div> <！ - data-spy = "scroll" set data actatibutes for the listens object-> <！ - data-target = "＃menu" set聴取オブジェクト - > <！ 1 </h3> <p> <img src = "img/1.jpg"> </p> <h3 id = "2">リスト2 </h3> <p> <img src = "img/2.jpg"> </p> <h3 id = "3">リスト3 </h3> id = "4">リスト4 </h3> <p> <img src = "img/4.jpg"> </p> <h3 id = "5">リスト5 </h3> <p> <img src = "img/5.jpg"> </p> </div>
監視をスクロールします
<body data-spy = "scroll" data-target = "＃navbar" data-offset = "0"> <div id = "navbar"> <ul> <li> <a href = "＃1"> list1 </a> </li> <li> <a href = "＃" data-toggle = "ドロップダウン">ドロップダウンメニュー<b> </b> </a> <ul> <li> <a href = "＃3"> list3 </a> </li> <li> <a href = "＃4"> list4 </a> </li> </li> </ul> </div> <！ - data-spy = "scroll"は、リスニングオブジェクトのデータ属性を設定します - > <！ - data-target = "＃menu"リスニングオブジェクトを設定 - > <！ - data-offset = "30" sets offset-> <h3 id = "1"> list 1 </h3> <p> id = "2">リスト2 </h3> <p> <img src = "img/2.jpg"> </p> <h3 id = "3">リスト3 </h3> <p> <p> <p> <img src = "img/3.jpg"> </p> <h3 id = "4">リスト4 <h3 id = "5">リスト5 </h3> <p> <img src = "img/5.jpg"> </p> </div>
CSSスタイル
#navbar {position：sixt;右：10px;トップ：50px;幅：200px;バックグラウンドカラー：#fff;}呼びかけ：
最初のもの：Data-Spy =” Scroll”メソッドを使用してください。上記はです
2番目のタイプ：JSコールを使用します
htmlはdata-spy =” scroll”を削除するだけです
$（function（）{$（ "body"）。scrollspy（）; //新しいナビゲーションバーアイテムがアクティブ化されている場合、$（ "body"）。 "block"）まだ詳細に勉強したい場合は、ここをクリックして素晴らしいトピックを学び、添付してください：Bootstrap Learningチュートリアル
上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。