Bootstrap框架中提供了十分方便的方法來使用導航關聯內容快,而且開發者能夠監聽滾動進行導航按鈕的切換,示例以下:javascript
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" /> <script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script> <script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.js"></script> <style> .scrollspy-example { position: relative; height: 200px; margin-top: 10px; overflow: auto } </style> <title>滾動監聽</title> </head> <body class="container"> <br /> <br /> <!--導航欄--> <nav id="navbar" class="navbar navbar-default navbar-static"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navigationShow"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">列表</a> </div> <!--導航容器--> <div class="navbar-collapse navigationShow"> <!--導航--> <ul class="nav navbar-nav"> <li class="active"> <a href="#One">第一項</a> </li> <li class=""> <a href="#Two">第二項</a> </li> <li class="dropdown"> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">菜單 <span class="caret"></span></a> <ul class="dropdown-menu"> <li class=""> <a href="#one">菜單1</a> </li> <li class=""> <a href="#two">菜單2</a> </li> <li class="divider"></li> <li class=""> <a href="#three">菜單3</a> </li> </ul> </li> </ul> </div> </nav> <!--內容div 使用data-spy="scroll"來進行滾動監聽--> <div data-spy="scroll" data-target="#navbar" class="scrollspy-example"> <!--id須要對應--> <h4 id="One">第一項</h4> <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p> <h4 id="Two">第二項</h4> <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p> <h4 id="one">one</h4> <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p> <h4 id="two">two</h4> <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p> <h4 id="three">three</h4> <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p> <p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats. </p> </div> </body> </html>
效果以下所示:css
開發者也能夠對導航標籤的切換事件進行監聽,方法以下:html
$('#navbar').on('activate.bs.scrollspy',function(e){ console.log("滾動導航改變"); })
另外,本篇博客中全部的實例代碼及顯示效果,在以下地址中,須要的能夠自行對照學習。前端
http://zyhshao.github.io/bootStrapDemo/scrollJS.html。java
前端學習新人,有志同道合的朋友,歡迎交流與指導,QQ羣:541458536jquery