Bootstrap学习js插件篇之滚动监听

1、滚动监听

案例

滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。Bootstrap中文网左侧就是一个滚动监听的例子。

代码段：

<navid="navbar-example2"class="navbarnavbar-defaultnavbar-static"role="navigation"><divclass="navbar-header"><buttonclass="navbar-toggle"type="button"data-toggle="collapse"data-target=".bs-js-navbar-scrollspy"><spanclass="sr-only">Toggle-navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><ahref="#"class="navbar-brand">PRojectName</a></div><divclass="collapsenavbar-collapsebs-js-navbar-scrollspy"><ulclass="navnavbar-nav"><li><ahref="#fat">@fat</a></li><li><ahref="#mdo">@mdo</a></li><liclass="dropdown"><ahref="#"id="navbarDrop1"class="dropdown-toggle"data-toggle="dropdown">Dropdown<bclass="caret"></b></a><ulclass="dropdown-menu"role="menu"aria-labelledby="navbarDrop1"><li><ahref="#one"tabindex="-1">one</a></li><li><ahref="#two"tabindex="-1">two</a></li><liclass="divider"></li><li><ahref="#three"tabindex="-1">three</a></li></ul></li></ul></div></nav>[html]view%20plaincopy

1. <divclass="scrollspy-example"data-target="#navbar-example2"data-offset="0"data-spy="scroll">
2. <spanstyle="white-space:pre"></span><h4id="fat">@fat</h4>
3. <p>Adleggingskeytar,brunchidartpartydolorlabore.Pitchforkyrenimlo-fibeforetheysoldoutqui.Tumblrfarm-to-tablebicyclerightswhatever.Animkeffiyehcarlescardigan.Velitseitanmcsweeney'sphotobooth3wolfmoonirure.Cosbysweaterlomojeanshorts,williamsburghoodieminimquiyouprobablyhaven'theardofthemetcardigantrustfundculpabiodieselwesandersonaesthetic.Nihiltattooedaccusamus,credironybiodieselkeffiyehartisanullamcoconsequat.</p>
4. <h4id="mdo">@mdo</h4>
5. <p>Veniammarfamustacheskateboard,adipisicingfugiatvelitpitchforkbeard.Freeganbeardaliquacupidatatmcsweeney'svero.Cupidatatfourlokonisi,eahelveticanullacarles.Tattooedcosbysweaterfoodtruck,mcsweeney'squisnonfreeganvinyl.Lo-fiwesanderson+1sartorial.Carlesnonaestheticexercitationquisgentrify.Brooklynadipisicingcraftbeervicekeytardeserunt.</p>
6. <h4id="one">one</h4>
7. <p>Occaecatcommodoaliquadelectus.Fapcraftbeerdeseruntskateboardea.Lomobicyclerightsadipisicingbanhmi,veliteasuntnextlevellocavoresingle-origincoffeeinmagnaveniam.Highlifeidvinyl,echoparkconsequatquisaliquipbanhmipitchfork.VeroVHSestadipisicing.ConsecteturnisiDIYminimmessengerbag.Credexin,sustainabledelectusconsecteturfannypackiphone.</p>
8. <h4id="two">two</h4>
9. <p>Inincididuntechopark,officiadeseruntmcsweeney'sproidentmastercleansethundercatssapienteveniam.ExcepteurVHSelit,proidentshoreditch+1biodiesellaborumcraftbeer.Single-origincoffeewayfarersirurefourloko,cupidatatterryrichardsonmastercleanse.Assumendayouprobablyhaven'theardofthemartpartyfa