This article mainly learns the JavaScript plug-in - scrolling listening.
1. Case
The scroll listening plug-in can automatically update the corresponding navigation marks according to the position of the scroll bar. You can try scrolling this page and see the changes in the navigation on the left.
First put the implemented code on, you can check the effect by testing the code.
<!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!--[if lt IE 9]> <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"></script> <![endif]--> <style type="text/css"> .scrollspy-example { height: 200px; overflow: auto; position: relative; border:1px solid red; } </style> </head> <body><div > <nav id="navbar-example" role="navigation"> <div> <button type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href="#">Project Name</a> </div> <div> <ul> <li><a href="#fat">@fat</a></li> <li><a href="#mdo">@mdo</a></li> <li> <a href="#" id="navbarDrop1" data-toggle="dropdown">Dropdown <b></b></a> <ul role="menu" aria-labelledby="navbarDrop1"> <li><a href="#one" tabindex="-1">one</a></li> <li><a href="#two" tabindex="-1">two</a></li> <li></li> <li><a href="#three" tabindex="-1">three</a></li> </ul> </li> </li> </li> </li> </div> </nav> <div data-offset="0" data-spy="scroll" data-target="#navbar-example"> <h4 id="fat">@fat</h4> <p>Ad leggings keytar, brunch id art party dolor labor. 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 minimum 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="mdo">@mdo</h4> <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork bear. Freegan bear aliqua cupidat mcsweeney's vero. Cupidat 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 exercise 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 apisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna venia. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minimum messenger bag. Cred ex in, sustainable delectus consist fanny pack iphone.</p> <h4 id="two">two</h4> <p>In incididunt echo park, official deserunt mcsweeney's proident master cleanse thundercats sapiente venia. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan temporal 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 labor. 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 minimum 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. Labor elit place 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 temporary 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"></script> </body> </html>Usage 1-- through data attribute
By adding it to the Div for the page elements you need to listen to (usually) but adding them to the Div, you can see the code yourself. Then add the attribute data-spy="scroll" to the div to easily add scrolling listening function to the top navigation bar. Then add the data-target attribute to it, the value of this attribute is the ID or class of the parent element of the .nav component in any Bootstrap.
Copy the code as follows:<div data-offset="0" data-spy="scroll" data-target="#navbar-example">
...........
</div>
The navigation link address must have a corresponding target
The link address in the navigation bar must have the corresponding page element with the same ID value.
Usage 2-- through JavaScript
Start scrolling listening via JavaScript:
<script type="text/javascript"> $(function () { $('.scrollspy-example').scrollspy({ target:'#navbar-example' }); }) </script>Remove its data-target property by placing the style class as a scrollspy-example div. This also allows you to switch the mouse wheel.
2. Method
.scrollspy('refresh')
When using the scroll listening plugin, this method needs to be called whenever a page element is added or deleted from the DOM in the page, as follows:
Copy the code code as follows: $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') })
3. Options
Options can be passed through data properties or JavaScript. For data attributes, you need to put the option name after data-, for example data-offset="".
4. Events
<script type="text/javascript"> $('#navbar-example').on('activate.bs.scrollspy', function () { alert(1); }) </script>Finally, note: Of course, you need to add scroll bars to the content of scrolling monitoring, that is, you need to add styles in advance.
<style type="text/css"> .scrollspy-example { height: 200px; overflow: auto; position: relative; border:1px solid red; } </style>Give Div content a certain height.
The above are the learning notes for Bootstrap scrolling and monitoring related content. If you still want to continue learning Bootstrap, you can click here to continue learning. I hope it will be helpful to your learning. I also hope that you will continue to pay attention to more exciting content from Wulin.com.