The scroll monitoring (Scrollspy) plug-in, that is, the automatic update of the navigation plug-in, will automatically update the corresponding navigation target according to the position of the scroll bar. Its basic implementation is to add .active class to the navigation bar based on the scrollbar position as you scroll.
If you want to reference the functionality of the plugin separately, then you need to reference scrollspy.js. Or, as mentioned in the Bootstrap plugin overview chapter, you can refer to bootstrap.js or compressed versions of bootstrap.min.js.
1. Usage
You can add scroll listening behavior to the top navigation:
1. Through the data attribute: Add data-spy="scroll" to the element you want to listen to (usually body). Then add the attribute data-target with the ID of the parent element of the Bootstrap .nav component or the class's property. In order for it to work properly, you must make sure that there are elements in the body of the page that match the ID of the link you want to listen to.
<body data-spy="scroll" data-target=".navbar-example"> ... <div> <ul> ... </ul> </div> ...</body>
2. Through JavaScript: You can call scroll monitoring through JavaScript, select the element to be listened to, and then call the .scrollspy() function:
$('body').scrollspy({ target: '.navbar-example' })
2. Scroll monitoring
The scroll listening plug-in is used to automatically update navigation items based on the position where the scroll bar is located, and display navigation items highlighted.
//Basic Example<nav id="nav"> <a href="#">Web Development</a> <ul> <li> <a href="#html5">HTML5</a> </li> <li> <a href="#bootstrap">Bootstrap</a> </li> <li> <a href="#" data-toggle="dropdown">JavaScript <span></span></a> <ul> <li> <a href="#jquery">jQuery</a> </li> <li> <a href="#yui">Yui</a> </li> <li> <a href="#extjs">Extjs</a> </li> </li> </li> </li> </ul></nav><div data-offset="0" data-target="#nav" data-spy="scroll" style="height: 200px; overflow: auto; position: relative;padding: 0 10px;"> <h4 id="html5">HTML5</h4> <p> An application HTML under the standard universal markup language After HTML4.01 was released in December 1999, the subsequent HTML5 and other standards were left behind. In order to promote the development of the Web standardization movement, some companies joined forces to establish a Web Hypertext Application Technology Working Group (Web Organization of the Hypertext Application Technology Working Group-WHATWG. WHATWG is dedicated to web forms and applications, while W3C (World Wide Web Consortium) focuses on XHTML2.0. In 2006, the two sides decided to cooperate to create a new version of HTML. </p> <h4 id="bootstrap">Bootstrap</h4> <p> Bootstrap, from Twitter, is currently a very popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster. [1]It was developed in collaboration with Twitter designer Mark Otto and Jacob Thornton and is a CSS/HTML framework. Bootstrap provides elegant HTML and CSS specifications, written in the dynamic CSS language Less. Bootstrap was popular since its launch and has been a popular open source project on GitHub, including NASA's MSNBC's (Microsoft NBC)'s Breaking News. [2] Some frameworks that are more familiar to domestic mobile developers, such as the WeX5 front-end open source framework, are also based on the Bootstrap source code for performance optimization. [3] </p> <h4 id="jquery">jQuery</h4> <p> JQuery is another excellent Javascript library after prototype. It is a lightweight js library, it is compatible with CSS3, and is also compatible with various browsers (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+). jQuery 2.0 and subsequent versions will no longer support IE6/7/8 browser. jQuery allows users to more conveniently process HTML (an application under standard universal markup language), events, achieve animation effects, and conveniently provide AJAX interaction for websites. jQuery has another major advantage, its documentation is very comprehensive, and various applications are also explained in detail, and there are also many mature plug-ins to choose from. jQuery can keep the user's html page separate from the html content. That is to say, there is no need to insert a bunch of js into the html to call the commands, you just need to define the id. </p> <h4 id="yui">Yui</h4> <p> With the development of jQuery, Ext and CSS3 in recent years, the front-end development framework represented by Bootstrap has been crowded into the field of vision like mushrooms after a rain, and it is overwhelming. Many excellent frameworks have emerged both on the desktop browser and mobile side, greatly enriching the development materials and facilitating everyone's development. These frameworks have their own characteristics. This article provides a preliminary introduction and comparison of these frameworks. I hope to provide some help in choosing the framework and also provide a detailed study of these frameworks in the future. </p> <h4 id="extjs">Extjs</h4> <p> ExtJS can be used to develop RIA, that is, AJAX applications of rich clients. It is written in javascript, mainly used to create front-end user interfaces, and is a front-end ajax framework that is not related to back-end technology. Therefore, ExtJS can be used in applications developed by various development languages such as .Net, Java, Php, etc. ExtJs was originally based on YUI technology and was developed by developer JackSlocum. It organizes visual components by referring to JavaSwing and other mechanisms. Whether from CSS-style applications on the UI interface to exception handling in data analysis, it can be regarded as a rare high-quality JavaScript client technology. </p></div>
There are two important attributes, as shown in the figure below:
PS: In a menu and an easy time, data-target can also be stable to realize scrolling monitoring highlighting without setting. But when you do not associate one of them when multiple navigations, it will cause an error, so it usually needs to be added.
If you use JavaScript scripting method, you can remove data-* and use script attribute definitions: offset, spy, and target. The specific methods are as follows:
//Define the property $('#content').scrollspy({ offset : 0, target : '#nav',});There is also an event to switch to a new entry.
//Events are bound to navigation
$('#nav').on('activate.bs.scrollspy', function() {
alert('This event is triggered after a new entry is activated!');
});
There is also a way to update the container DOM in scrolling listening.
//HTML part
<section> <h4 id="html5">HTML5 <a href="#" onclick="removeSec(this)">Delete this</a></h4> <p> ... </p></section>
//When deleting content, refresh the DOM to avoid misalignment of navigation monitoring
function removeSec(e) { $(e).parents('.sec').remove(); $('#content').scrollspy('refresh');}Note: This method must use data-* declarative.
The above is all about this article, I hope it will be helpful to everyone's learning.