This article introduces bootstrap rolling monitoring, for everyone to learn, the specific contents are as follows
Scrolling monitor with scroll bar scrolling, list items are constantly switched to activate
<!--id= "menu" is the Listener object for data-target= "#menu"--> <!--navbar Navbar-inner nav navbar-fixed-top fixed navigation bar--> <div Id= "Menu" class= "NavBar navbar-fixed-top" > <div class= "Navbar-inner" > <div class= "nav" > <li& Gt;<a href= "#1" > List 1</a></li> <li><a href= "#2" > List 2</a></li> <!--D
Ropdown dropdown-menu drop-down Menu--> <li class= "dropdown" > <!--data-toggle= "dropdown" Invoke Drop-down behavior--> <a href= "#" data-toggle= "dropdown" > Pull-down menu <b class= "Caret" ></b></a> <ul class= "drop Down-menu "> <li><a href=" #3 > List 3</a></li> <li><a href= "#4" > List 4&
lt;/a></li> <li><a href= "#5" > List 5</a></li> </ul> </li> </div> </div> </div> <!--data-spy= "Scroll" set the Data property for the listener--> <!--data-target= "#menu" Setup Supervisor Audience--> <!--data-offset= "30" set offset--> <div class= "Scrollspy" data-spy= "scroll" data-target= "#menu" data-offset= ">
scrolling Listening
<body data-spy= "Scroll" data-target= "#navbar" data-offset= "0" > <div id= "navbar" > <ul class= "Nav Nav-pil ls nav-stacked "> <li><a href=" #1 > List 1</a></li> <li><a href= "#2" > List 2</A&G t;</li> <li class= "dropdown" > <a href= "#" data-toggle= "dropdown" > Drop-down menu <b class= "Caret" >&
lt;/b></a> <ul class= "Dropdown-menu" > <li><a href= "#3" > List 3</a></li>
<li><a href= "#4" > List 4</a></li> <li><a href= "#5" > List 5</a></li> </ul> </li> </ul> </div> <!--data-spy= "Scroll" sets the Data property for listening objects--> <!--data-t arget= "#menu" Setting Listener object--> <!--data-offset= "30" set offset--> <div class= "Scrollspy" >
CSS Styles
#navbar {
position:fixed;
right:10px;
top:50px;
width:200px;
Background-color: #fff;
}
Call:
The first: Using the data-spy= "scroll" method, this is
The second type: Use JS to invoke
HTML just removes data-spy= "scroll"
$ (function () {
$ ("body"). Scrollspy ();
The $ ("body") is triggered when an item of a new navigation bar is activated
. On ("Activate", function (e) {
if (e.target && $ (e.target). Hasclass (" Dropdown ")) {
$ (e.target). Children (" Ul.dropdown-menu "). CSS (" Display "," block ");
} else {
$ (e.target ). Parent (). Find ("Ul.dropdown-menu"). CSS ("display", "none");
}
})
;
If you want to further study, you can click here to learn, and then attach a wonderful topic: Bootstrap Learning Course
The above is the entire content of this article, I hope to learn JavaScript program to help you.