---The first introduction of the source code description of the official website
---then summarizes a few steps to using the scroll listener
---Give a simple example at the end
---The key point: The whole is a little fragmented and messy, hard your mind and eyes, hehe
----------------------------------------------------------------------------------------------------------
1. Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.
----Use scrolling monitoring, the navigation bar must use the Nav component of class= "NAV" to:
Here is a paragraph in the source code, the Red part can prove this:
When using Scrollspy, you need to use <ul class= "NAV" > tags, and <a> tags must be in <li>.
Note: In addition we need to place the <ul class= "NAV" > tag in another container (such as a div) and add an id attribute to the parent container (this is described in section 4th)
1 functionscrollspy (element, options) {2 This. $body =$ (document.body)3 This. $scrollElement = $ (Element). is (document.body)?$ (window): $ (Element)4 This. options =$.extend ({}, Scrollspy.defaults, Options)5 this.selector = (This.options.target | | ") + '. Nav li > a '6 This. Offsets = []7 This. targets = []8 This. Activetarget =NULL9 This. scrollheight = 0Ten One This. $scrollElement. On (' Scroll.bs.scrollspy ', $.proxy ( This. Process, This)) A This. Refresh () - This. Process () -}
2. Navbar links must has resolvable ID targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div> .
---simply, the <a> tag under <li> must have a href= "#id" attribute, and within the scrolling content, there must be a corresponding <a id= "id" ></a> such a label; when the content is scrolled to < A id= "id" > tag, the corresponding <li> <a href= "#id" > will be automatically selected.
In fact, this has been done by web development friends know that in the previous HTML version, the anchor tag is usually used <a name= "tag" > this way, but the anchor tag in HTML5 has abandoned the name property, instead of the ID attribute
ScrollSpy.prototype.activate =function(target) { This. Activetarget =Target This. Clear ()varselector = This. selector + ' [data-target= ' + target + ' "], ' + This. selector + ' [href= ' + target + ' "] 'varActive =$ (selector). 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 the position: relative; element "on" of You "re spying on. The cases is the <body> . When scrollspying in elements other than <body> the, being sure to has a height set and overflow-y: scroll; applied.
---If you listen to the body scrolling, you must add the position:relative style to the body
---If the listener is not the body, but other elements [seemingly common in this way], then you need to add three styles:position:relative;height:500px;overflow-y:scroll;
ScrollSpy.prototype.refresh =function () { varthat = This varOffsetmethod = ' offset 'varOffsetbase = 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-to data-spy="scroll" -the-element you-want-spy on (most typic Ally this would is the <body> ). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.
---you need to add data-spy= "scroll" property and data-target property to the label of the scrolling content
The Data-spy property indicates which element is being monitored, and the Data-target property indicates the nav highlighting that needs to be controlled when scrolling
Look at the following initialization source code, the location of the Red ,this.options.target value, is equal to the scrolling content element of the data-target value, see here, you may have thought, When defining the. Nav component, we need to put. Nav in another container (such as a Div), and the container needs to have an ID attribute (the same value that Data-target needs to set here).
functionscrollspy (element, options) { This. $body =$ (document.body) This. $scrollElement = $ (Element). is (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 就是要承载滚动内容的元素的ID，nav-parent-div-id 就是.nav元素的父元素的id（也就是data-target的值）
乱七八糟写了一堆，下面总结一个简单的几个步骤：
1. Add tag <div id= "Scrollspyid" >
2. Add the. Nav component to the tag 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 segment </a> </li> < li> <a href= "#C" > Third segment </a> </li> </ul> </div>
<div id= "Body" class= "Container-fluid" data-spy= "scroll" data-target= "#sc" > <a id= "A" > First segment </a>< br/> <!--There's a lot of content to be sure, at least you can scroll-- <a id= "A" > second segment </a><br/> <!--There's a lot of content here, At least make sure you can scroll --<a id= "A" > Third paragraph </a><br/> <!--There's a lot of content to be sure, at least you can scroll--and</div >
$ (function () { $ (' #body '). Scrollspy ({target: ' #sc '); });
BOOTSTAP scrolling Monitoring
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
