The additional navigation (Affix) plugin allows a <div> to be pinned somewhere on the page. You can also toggle between turning on or off using the plugin. A common example is social icons. They will start somewhere, but when the page clicks on a mark, the <div> will lock in somewhere and will not scroll along with the rest of the page.
If you want to reference the functionality of the plugin separately, then you need to reference affix.js.
1. Usage
Additional navigation (Affix) plug-ins can be used through data properties or through JavaScript.
1. Through data attributes: If you need to add additional navigation (Affix) behavior to the element, you only need to add data-spy="affix" to the element you need to listen to. Use offsets to define when toggle elements' locking and movement.
2. Through JavaScript: You can manually add additional navigation to an element through JavaScript (Affix)
2. Positioning through CSS
In both of the above ways to use the Affix plug-in, you must locate content via CSS. The additional navigation (Affix) plug-in switches between three classes, each of which presents a specific state: .affix, .affix-top, and .affix-bottom. Please follow the steps below to set up your own CSS for these three states (not relying on this plugin).
1. At the beginning, the plugin adds .affix-top to indicate the element at its topmost position. No CSS positioning is required at this time.
2. When scrolling through elements with additional navigation (Affix) added, the actual additional navigation (Affix) should be triggered. At this time, .affix will replace .affix-top, and set position: fixed; (provided by Bootstrap's CSS code).
3. If the bottom offset is defined, when the scroll reaches this position, replace .affix with .affix-bottom. Since the offset is optional, if the offset is set, an appropriate CSS is required to be set at the same time. In this case, add position: absolute; if necessary.
3. Options
There are some options that are passed through data properties or JavaScript. The following table lists these options:
IV. Examples
Additional navigation means pasting it somewhere on the screen to realize the anchor function.
1. Basic examples
<body data-spy="scroll" data-target="#myScrollspy"> <div> <div style="height:150px"> <h1>Bootstrap Affix</h1> </div> <div> <div id="myScrollspy"> <ul data-spy="affix"data-offset-top="150"> <li> <a href="#section-1">Part 1</a> </li> <li> <a href="#section-2">Part 2</a> </li> <li> <a href="#section-3">Part 3</a> </li> <li> <a href="#section-4">Part 4</a> </li> <li> <a href="#section-4">Part 5</a> </li> </ul> </div> <div> <h2 id="section-1">Part 1</h2> <p> ... </p> <h2 id="section-2">Part 2</h2> <p> ... </p> <h2 id="section-3">Part 3</h2> <p> ... </p> <h2 id="section-4">Part 4</h2> <p> ... </p> <h2 id="section-5">Part 4</h2> <p> ... </p> </div> </div> </div>
2. The CSS part of navigation
ul.nav-pills { width: 200px;}ul.nav-pills.affix { top: 30px;}//JavaScript instead of data-spy="affix" data-offset-top="125"$('#myAffix').affix({ offset : { top : 150 }})We use top by default, and of course we can also use bottom by default. This positioning method is directly positioned through CSS.
//Set to bottomul.nav-tabs.affix-bottom { bottom: 30px;}//Set to bottom$('#myAffix').affix({ offset : { bottom : 150 }})Affix contains several events, as follows:
//Other similar $('#myAffix').on('affixed-top.bs.affix', function() { alert('trigger!');});If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all about this article, I hope it will be helpful to everyone's learning.