この記事では、すべての人が学習できるブートストラップスクロール監視を紹介します。特定のコンテンツは次のとおりです
スクロールバーのスクロールを伴うスクロール監視、リストアイテムは常に切り替えられ、アクティブ化されます。
<! - 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プログラミングを学ぶことが役立つことを願っています。