Bootstrap scroll monitor (Scrollspy) widget
Scroll monitor (Scrollspy) plug-in, which automatically updates the navigation widget automatically updates the corresponding navigation target based on the position of the scroll bar. The basic implementation is as you scroll, scroll bar position based.active class added to the navigation bar.
If you want to refer to the individual plug-in features, you need to referencescrollspy.js.Or, as Bootstrap plugin Overview chapter mentioned, you can refer tobootstrap.jsor compressed version ofbootstrap.min.js.
usage
You can add a scroll to the top of the navigation monitor behavior:
- Through data attribute: you want to listen to an element (usually a body) to add data-spy = "scroll".Then add the ID or class of the parent element withBootstrap .nav component attribute data-target.For it to work properly, you must make sure that there is a match in the body of the page you want to link the ID monitor element exists.
<Body data-spy = "scroll" data-target = ". Navbar-example"> ... <Div class = "navbar-example"> <Ul class = "nav nav-tabs"> ... </ Ul> </ Div> ... </ Body>
- By JavaScript: You can scroll through the JavaScript call to listen, to listen to select elements, then call .scrollspy ()function:
. $ ( 'Body') scrollspy ({target: '.navbar-example'})
Examples
The following example demonstrates the use of scrolling through data attribute monitor (Scrollspy) plug-in:
Examples
<Nav id = "navbar-example" class = "navbar navbar-default navbar -static" role = "navigation">
<Div class = "container-fluid">
<Div class = "navbar-header">
<Button class = "navbar-toggle" type = "button" data-toggle = "collapse"
data-target = ".bs-js -navbar-scrollspy">
<Span class = "sr-only"> Switching the Navigation </ span>
<Span class = "icon-bar"> </ span>
<Span class = "icon-bar"> </ span>
<Span class = "icon-bar"> </ span>
</ Button>
<A class = "navbar-brand" href = "#"> Tutorial Name </ a>
</ Div>
<Div class = "collapse navbar-collapse bs -js-navbar-scrollspy">
<Ul class = "nav navbar-nav" >
<Li> <a href = "#ios"> iOS < / a> </ li>
<Li> <a href = "#svn"> SVN < / a> </ li>
<Li class = "dropdown">
<A href = "#" id = "navbarDrop1" class = "dropdown-toggle"
data-toggle = "dropdown"> Java <b class = "caret"> </ b>
</ A>
<Ul class = "dropdown-menu" role = "menu"
aria-labelledby = "navbarDrop1">
<Li> <a href = "#jmeter" tabindex = "-1"> jmeter < / a> </ li>
<Li> <a href = "#ejb" tabindex = "-1"> ejb < / a> </ li>
<Li class = "divider"> </ li>
<Li> <a href = "#spring" tabindex = "-1"> spring < / a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
<Div data-spy = "scroll" data-target = "# navbar- example" data-offset = "0"
style = "height: 200px; overflow : auto; position: relative;">
<H4 id = "ios"> iOS < / h4>
<P> iOS is a developed and published by Apple's mobile operating system. Originally released for the first time iPhone, iPod Touch and Apple TV in 2007. iOS is derived from OS X, they share the Darwin foundation. OS X operating system is used on a Mac, iOS is Apple's mobile version. </ P>
<H4 id = "svn"> SVN < / h4>
<P> Apache Subversion, often abbreviated SVN, is an open source version control system software. CollabNet Subversion created by the company in 2000. But now it has developed as a project of the Apache Software Foundation, it has a rich developer and user communities. </ P>
<H4 id = "jmeter"> jMeter < / h4>
<P> jMeter is an open source test software. It is 100% pure Java application, for load and performance testing. </ P>
<H4 id = "ejb"> EJB < / h4>
<P> Enterprise Java Beans (EJB ) is a development framework to create a highly scalable and robust enterprise applications, deployed on a compatible application servers (such as JBOSS, Web Logic, etc.) of J2EE. </ P>
<H4 id = "spring"> Spring < / h4>
<P> Spring Framework is an open source Java platform for rapid development of powerful Java application offers a complete infrastructure support. </ P>
<P> Spring framework originally written by Rod Johnson in June 2003 was first released under Apache 2.0 license. </ P>
</ Div>
try it"
The results are as follows:
Options
To pass through data attributes or JavaScript. The following table lists these options:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| offset | number 默认值：10 | data-offset | 当计算滚动位置时，距离顶部的偏移像素。 |
method
.scrollspy ( 'refresh'): When calling scrollspy by JavaScript method, you need to call .refreshmethod to update the DOM. This is useful to change (that is, you add or remove certain elements) occur at any time of the DOM element. Here is the syntax of this method.
$ ( '[Data-spy = "scroll"]'). Each (function () {
var $ spy = $ (this) .scrollspy ( 'refresh')
})
Examples
The following example demonstrates.scrollspy ( 'refresh') method:
Examples
<Nav id = "myScrollspy" class = "navbar navbar-default navbar -static" role = "navigation">
<Div class = "container-fluid">
<Div class = "navbar-header">
<Button class = "navbar-toggle" type = "button" data-toggle = "collapse"
data-target = ".bs-js -navbar-scrollspy">
<Span class = "sr-only"> Switching the Navigation </ span>
<Span class = "icon-bar"> </ span>
<Span class = "icon-bar"> </ span>
<Span class = "icon-bar"> </ span>
</ Button>
<A class = "navbar-brand" href = "#"> Tutorial Name </ a>
</ Div>
<Div class = "collapse navbar-collapse bs -js-navbar-scrollspy">
<Ul class = "nav navbar-nav" >
<Li class = "active"> <a href = "#ios"> iOS < / a> </ li>
<Li> <a href = "#svn"> SVN < / a> </ li>
<Li class = "dropdown">
<A href = "#" id = "navbarDrop1" class = "dropdown-toggle"
data-toggle = "dropdown"> Java <b class = "caret"> </ b>
</ A>
<Ul class = "dropdown-menu" role = "menu"
aria-labelledby = "navbarDrop1">
<Li> <a href = "#jmeter" tabindex = "-1"> jmeter < / a> </ li>
<Li> <a href = "#ejb" tabindex = "-1"> ejb < / a> </ li>
<Li class = "divider"> </ li>
<Li> <a href = "#spring" tabindex = "-1"> spring < / a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
<Div data-spy = "scroll" data-target = "#myScrollspy" data-offset = "0"
style = "height: 200px; overflow : auto; position: relative;">
<Div class = "section">
<H4 id = "ios"> iOS < small> <a href = "#" onclick = "removeSection (this); ">
& times; remove the part </ a> </ small>
</ H4>
<P> iOS is a developed and published by Apple's mobile operating system. Originally released for the first time iPhone, iPod Touch and Apple TV in 2007. iOS is derived from OS X, they share the Darwin foundation. OS X operating system is used on a Mac, iOS is Apple's mobile version. </ P>
</ Div>
<Div class = "section">
<H4 id = "svn"> SVN < small> </ small> </ h4>
<P> Apache Subversion, often abbreviated SVN, is an open source version control system software. CollabNet Subversion created by the company in 2000. But now it has developed as a project of the Apache Software Foundation, it has a rich developer and user communities. </ P>
</ Div>
<Div class = "section">
<H4 id = "jmeter"> jMeter < small> <a href = "#" onclick = "removeSection (this); ">
& times; remove the part </ a> </ small>
</ H4>
<P> jMeter is an open source test software. It is 100% pure Java application, for load and performance testing. </ P>
</ Div>
<Div class = "section">
<H4 id = "ejb"> EJB < / h4>
<P> Enterprise Java Beans (EJB ) is a development framework to create a highly scalable and robust enterprise applications, deployed on a compatible application servers (such as JBOSS, Web Logic, etc.) of J2EE. </ P>
</ Div>
<Div class = "section">
<H4 id = "spring"> Spring < / h4>
<P> Spring Framework is an open source Java platform for rapid development of powerful Java application offers a complete infrastructure support. </ P>
<P> Spring framework originally written by Rod Johnson in June 2003 was first released under Apache 2.0 license. </ P>
</ Div>
</ Div>
. <Script> $ (function ( ) {removeSection = function (e) {$ (e) .parents ( ". Section") remove ();. $ ( '[Data-spy = "scroll"]') each ( function () {var $ spy = $ (this) .scrollspy ( 'refresh')});} $ ( "# myScrollspy") scrollspy ();.}); </ script>
try it"
The results are as follows:
event
The following table lists the monitor to use to scroll event. These events can be used when the hook function.
| 事件 | 描述 | 实例 |
|---|---|---|
| activate.bs.scrollspy | 每当一个新项目被滚动监听激活时，触发该事件。 |
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// 执行一些动作...
})
|
Examples
The following example demonstrates the use ofactivate.bs.scrollspy event:
Examples
<Nav id = "myScrollspy" class = "navbar navbar-default navbar -static" role = "navigation">
<Div class = "container-fluid">
<Div class = "navbar-header">
<Button class = "navbar-toggle" type = "button" data-toggle = "collapse"
data-target = ".bs-js -navbar-scrollspy">
<Span class = "sr-only"> Switching the Navigation </ span>
<Span class = "icon-bar"> </ span>
<Span class = "icon-bar"> </ span>
<Span class = "icon-bar"> </ span>
</ Button>
<A class = "navbar-brand" href = "#"> Tutorial Name </ a>
</ Div>
<Div class = "collapse navbar-collapse bs -js-navbar-scrollspy">
<Ul class = "nav navbar-nav" >
<Li class = "active"> <a href = "#ios"> iOS < / a> </ li>
<Li> <a href = "#svn"> SVN < / a> </ li>
<Li class = "dropdown">
<A href = "#" id = "navbarDrop1" class = "dropdown-toggle"
data-toggle = "dropdown"> Java <b class = "caret"> </ b>
</ A>
<Ul class = "dropdown-menu" role = "menu"
aria-labelledby = "navbarDrop1">
<Li> <a href = "#jmeter" tabindex = "-1"> jmeter < / a> </ li>
<Li> <a href = "#ejb" tabindex = "-1"> ejb < / a> </ li>
<Li class = "divider"> </ li>
<Li> <a href = "#spring" tabindex = "-1"> spring < / a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
<Div data-spy = "scroll" data-target = "#myScrollspy" data-offset = "0"
style = "height: 200px; overflow : auto; position: relative;">
<Div class = "section">
<H4 id = "ios"> iOS < small> <a href = "#" onclick = "removeSection (this); ">
& times; remove the part </ a> </ small>
</ H4>
<P> iOS is a developed and published by Apple's mobile operating system. Originally released for the first time iPhone, iPod Touch and Apple TV in 2007. iOS is derived from OS X, they share the Darwin foundation. OS X operating system is used on a Mac, iOS is Apple's mobile version. </ P>
</ Div>
<Div class = "section">
<H4 id = "svn"> SVN < small> </ small> </ h4>
<P> Apache Subversion, often abbreviated SVN, is an open source version control system software. CollabNet Subversion created by the company in 2000. But now it has developed as a project of the Apache Software Foundation, it has a rich developer and user communities. </ P>
</ Div>
<Div class = "section">
<H4 id = "jmeter"> jMeter < small> <a href = "#" onclick = "removeSection (this); ">
& times; remove the part </ a> </ small>
</ H4>
<P> jMeter is an open source test software. It is 100% pure Java application, for load and performance testing. </ P>
</ Div>
<Div class = "section">
<H4 id = "ejb"> EJB < / h4>
<P> Enterprise Java Beans (EJB ) is a development framework to create a highly scalable and robust enterprise applications, deployed on a compatible application servers (such as JBOSS, Web Logic, etc.) of J2EE. </ P>
</ Div>
<Div class = "section">
<H4 id = "spring"> Spring < / h4>
<P> Spring Framework is an open source Java platform for rapid development of powerful Java application offers a complete infrastructure support. </ P>
<P> Spring framework originally written by Rod Johnson in June 2003 was first released under Apache 2.0 license. </ P>
</ Div>
</ Div>
<Span id = "activeitem" style = "color: red;" > </ span>
. <Script> $ (function ( ) {removeSection = function (e) {$ (e) .parents ( ". Section") remove ();. $ ( '[Data-spy = "scroll"]') each ( function () {var $ spy = $ (this) .scrollspy ( 'refresh')});} $ ( "# myScrollspy") scrollspy ();.. $ ( '# myScrollspy') on ( 'activate.bs. scrollspy ', function () {var currentItem = $ ( "nav li.active> a.") text (); $ ( "# activeitem") html ( " You are currently viewing -" + currentItem);.. }) }); </ script>
try it"
The results are as follows:
More examples
Create a horizontal scroll listening
The following example demonstrates how to create a horizontal scrolling listener:
Examples
<- The navbar:! Used to jump to a section in the scrollable area ->
<Nav class = "navbar navbar- inverse navbar-fixed-top">
...
<Ul class = "nav navbar- nav">
<Li> <a href = " # section1"> Section 1 </ a> </ li>
...
</ Nav>
<-! The scrollable area ->
<Div data-spy = "scroll " data-target = ".navbar" data-offset = "12">
<-! Section 1 ->
<Div id = "section1">
<H1> Section 1 </ h1 >
<P> Try to scroll this page and look at the navigation bar while scrolling! </ P>
</ Div>
...
</ Div>
<Nav class = "navbar navbar- inverse navbar-fixed-top">
...
<Ul class = "nav navbar- nav">
<Li> <a href = " # section1"> Section 1 </ a> </ li>
...
</ Nav>
<-! The scrollable area ->
<Div data-spy = "scroll " data-target = ".navbar" data-offset = "12">
<-! Section 1 ->
<Div id = "section1">
<H1> Section 1 </ h1 >
<P> Try to scroll this page and look at the navigation bar while scrolling! </ P>
</ Div>
...
</ Div>
try it"
How to create a vertical scroll listening
The following example demonstrates how to create a vertical scroll listener:
Examples
<Body data-spy = "scroll " data-target = "#myScrollspy" data-offset = "20">
<Div class = "container">
<Div class = "row">
<Nav class = "col-sm -3" id = "myScrollspy">
<Ul class = "nav nav- pills nav-stacked">
<Li> <a href = " # section1"> Section 1 </ a> </ li>
...
</ Ul>
</ Nav>
<Div class = "col-sm -9">
<Div id = "section1">
<H1> Section 1 </ h1 >
<P> Try to scroll this page and look at the navigation list while scrolling! </ P>
</ Div>
...
</ Div>
</ Div>
</ Div>
</ Body>
<Div class = "container">
<Div class = "row">
<Nav class = "col-sm -3" id = "myScrollspy">
<Ul class = "nav nav- pills nav-stacked">
<Li> <a href = " # section1"> Section 1 </ a> </ li>
...
</ Ul>
</ Nav>
<Div class = "col-sm -9">
<Div id = "section1">
<H1> Section 1 </ h1 >
<P> Try to scroll this page and look at the navigation list while scrolling! </ P>
</ Div>
...
</ Div>
</ Div>
</ Div>
</ Body>
try it"