introduction
When writing a blog, many subtitles are often used for organization. When the article is long, you need to shuttle back and forth between different titles. If you manually add a directory and add an anchor point, it is really troublesome. For this reason, you can dynamically generate a directory area and use the Affix plug-in provided by Bootstrap to fix the directory area on the page. Bootstrap documentation uses it
Preparation - Introducing bootstrap.min.js
Put bootstrap.min.js into the script tag before body, and uikit.min.js will not be introduced for the time being.
After introducing related plug-ins, our idea is to first automatically generate anchor points and menu content based on the article, then add Affix to it to produce a fixed effect, and then use the scrollSpy plug-in of uikit (there is also scrollspy in bootstrap, and the usage method is almost the same).
Introduce-learning the use of Affix
The Affix plug-in helps us fix the position of the navigation part and add vertical offsets to the fixed elements according to the user's scrolling situation, so that the nav switches between three classes:
1.affix-top: indicates at the top
2.affix: means to scroll on the page, add fixed attributes, and use custom offsets
3.affix-bottom: means reaching the bottom
To enable Affix only requires the following code:
$('#nav').affix({ offset: { top:$('header').offset().top, bottom: ($('footer').outerHeight(true) + $('.application').outerHeight(true)) + 40 }});1. Organize HTML code parts
<ul id="mysidebar" ></ul>
Be sure to add nav and affix classes for ul.
2. Generate encapsulation code
Introduce this code snippet into your own script script
;$.fn.extend({ "createAffix": function(selector) { $list = $("" + selector), length = $list.length, affixValue = ""; for (var i = 0; i < length; i++) { //Add name attribute $list.eq(i).attr("id", ("node" + i)); var text = $list.eq(i).text(); if (i == 0) { affixValue += "<li><a href=#node" + i + " class='active' >" + text + "</a></li>"; } else { affixValue += "<li><a href=#node" + i + ">" + text + "</a></li>"; } } this.append(affixValue); this.affix({ offset: { top: this.offset().top//Offset from the top after fixed} }); return this; } });The principle of the above code is to pass in a tag or class that needs to be considered a title unit for the createAffix function, and add anchor links to it during the traversal process.
3. How to use
Writing HTML parts
<ul id="mysidebar" > <li><a href="#node1"></a></li> <li><a href="#node2"></a></li> <li><a href="#node3"></a></li> </ul> <h3 id="node1">Title 1</h3> <h3 id="node2">Title 2</h3> <h3 id="node3">Title 3</h3>
Writing Javascript section
$(function(){ $(' #mysidebar').createAffix('h3'); //Indicate that in the article, the `h3` tag needs to be added to the anchor. });Solve the problem of anchor point offset
Because the anchor point shifts the page to the top of the anchor element by default, that is, if we do the above operation on Title 1, when we click on the anchor point, the page will shift to the top position where 'Title 1' is located. If there is a menu bar at the top, it will be blocked and solved by setting the css style.
.class{ /* Adding padding can cause the anchor to shift num px downward, that is, skip the height of the menu bar. Make up for the blank part caused by padding-top by setting margin-top to a negative value*/ padding-top: num px; margin-top: -num px;}Add scrolling listening
Currently our DOM documentation is like this.
<ul id="mysidebar" ><li><a href="#node1"></a></li><li><a href="#node2"></a></li><li><a href="#node3"></a></li></ul>
Process it, introduce the uikit attribute, and check the document for details
<ul id="mysidebar" data-uk-scrollspy-nav="{closest:'li',smoothscrool:true}" ><li><a href="#node1"></a></li><li><a href="#node2"></a></li><li><a href="#node3"></a></li></ul>Introduce uikit.min.js
Since our menu item (li) is executed after the document is loaded, if the scrollspy of uikit is executed before the menu item is generated, it will definitely not work. Therefore, we need to introduce uikit.min.js after the menu item is generated. The code is as follows:
$(function(){$(' #mysidebar').createAffix('h3');//Generate menu $.getScript("uikit.min.js");//Load uikit.min.js asynchronously, and the scrolling monitoring takes effect.});