This article introduces bootstrap rolling monitoring, for everyone to learn, the specific contents are as follows
1. Scrollspy currently requires the use of a Bootstrap nav component for proper of active links.
----Use scroll monitoring, the navigation bar must be class= "NAV" NAV components:
The following is a paragraph in the source code, and the red section can prove this:
When using Scrollspy, it is necessary to adopt <ul class= "NAV" > label, and must have <a> label under <li>.
Note: In addition, we need to put the <ul class= "NAV" > label into another container (such as DIV) and add an id attribute to the parent container (this is described in section 4th)
function Scrollspy (element, options) {this
. $body = $ (document.body) this
. $scrollElement = $ (Element). (document.body)? $ (window): $ (Element)
this.options = $.extend ({}, Scrollspy.defaults, options)
this.selector = ( This.options.target | | ') + '. Nav li > A '
this.offsets = []
this.targets = []
this.activetarget = null
This.scrollheight = 0 this
. $scrollElement. On (' Scroll.bs.scrollspy ', $.proxy (this.process, this))
This.refresh ()
this.process ()
}
2. Navbar links must have resolvable ID targets. For example, a <a href= "#home" >home</a> must correspond to something into the DOM like <div id= "Home" >< /div>.
---simply, the <a> tag under <li> must have a href= "#id" attribute, and in the scrolling content, must have the corresponding <a id= "id" ></a> such label; when content scrolls to < A id= "id" > label, the corresponding <li> <a href= "#id" > will automatically be selected.
-in fact, as a friend of web development knows, in the previous HTML version, the anchor tag usually takes the form of <a name= "tag" >, but the anchor tag in HTML5 has abandoned the name attribute instead of the id attribute
ScrollSpy.prototype.activate = function (target) {
This.activetarget = target
this.clear ()
var selector = This.selector +
' [data-target= ' + target + '], ' +
this.selector + ' [href= ' + target + '] '
var active = $ (s Elector)
. Parents (' Li ')
. addclass (' active ')
if (Active.parent ('. Dropdown-menu '). Length) {
Active = Active
. Closest (' Li.dropdown ')
. addclass (' active ')
}
Active.trigger (' Activate.bs.scrollspy ')
}
3. No matter the implementation method, Scrollspy requires the use of position:relative; On the element for you ' re spying on. In most cases this is the <body>. When scrollspying on elements other than the <body> is sure to have a height set and overflow-y: scroll; Applied.
---If you listen for the body scrolling, you must add position:relative style to the body
---If the listener is not body, but other elements [seemingly this way common], then you need to add three styles:position:relative;height:500px;overflow-y:scroll;
ScrollSpy.prototype.refresh = function () {
var, = This
var offsetmethod = ' offset '
var offsetbase = 0
this.offsets = []
this.targets = []
this.scrollheight = this.getscrollheight ()
if (!$. IsWindow (this. $scrollElement [0])) {
Offsetmethod = ' position '
offsetbase = this. $scrollElement. ScrollTop ( )
}
4. To easily add Scrollspy behavior to your Topbar navigation, add data-spy= ' scroll ' to the element for you want to spy on (Mo St typically this would to be the <body>). Then Add the Data-target with the ID or class is the parent element of any Bootstrap. Navcomponent.
---you need to add data-spy= "scroll" Properties and Data-target properties to the scrolling content label
The Data-spy property indicates the element being monitored, and the data-target attribute indicates the nav highlighting that needs to be controlled when scrolling
Look again. The following initialization source code, the red position, the This.options.target value, is equal to the Data-target value of the scrolling content element, see here, you may have thought that, in defining the. Nav component, we need to put the. Nav in another container ( such as Div), and the container needs to have an id attribute (the same as the value set here Data-target).
function Scrollspy (element, options) {this
. $body = $ (document.body) this
. $scrollElement = $ (Element). (document.body)? $ (window): $ (Element)
this.options = $.extend ({}, Scrollspy.defaults, options)
this.selector = ( This.options.target | | ') + '. Nav li > A '
this.offsets = []
this.targets = []
this.activetarget = null
This.scrollheight = 0 this
. $scrollElement. On (' Scroll.bs.scrollspy ', $.proxy (this.process, this))
This.refresh ()
this.process ()
}
5. After adding position:relative; In your CSS, call the Scrollspy via JavaScript:
$ (' Yourtag '). Scrollspy ({target: ' Nav-parent-div-id '})
-Yourtag is the id,nav-parent-div-id of the element that is to host the scrolling content is the ID of the parent element of the Nav element (that is, the Data-target value)
A mess to write a bunch of, the following summary of a few simple steps:
1. Add label <div id= "Scrollspyid" >
2. Add the. Nav component to the label and add the Href= "#tag" property to Li->a
3. Add <div id= "content" data-spy= "scroll" data-target= "#scrollSpyID" >;
4. Add Style #content{height:500px;overflow-y:scroll;opsition:relative;
5. Add script $ (' #content '). Scrollspy ({target: ' Scrollspyid '});
Finally, a little chestnut:
<style type= "Text/css" >
#body {
position:relative;
height:500px;
OVERFLOW-Y: scroll;
}
</style>
<div id= "SC" >
<ul class= "Nav nav-pills" >
<li class= "active" >
<a href= "#A" > First paragraph </a>
</li>
<li>
<a href= "#B" > second paragraph </a>
</li>
<li >
<a href= "#C" > Third paragraph </a>
</li>
</ul>
</div>
<div id= "Body" class= "Container-fluid" data-spy= "scroll" data-target= "#sc" > <a id= "A" > First paragraph </a> <br/> <!--Here's a lot of content, at least to ensure that you can scroll--> <a id= "A" > second paragraph </a><br/> <!--here to There are a lot of content, at least to ensure that you can scroll--> <a id= "A" > the third paragraph </a><br/> <!--here to have a lot of content, at least to ensure that you can scroll--> < /div>
$ (function () {
$ (' #body '). Scrollspy ({target: ' #sc '});
If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course
The above is the entire content of this article, I hope to help you learn.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
