Additional navigation (affix) plug-ins allow a <div> to be fixed somewhere on the page. You can also switch between turning on or off using the plug-in. A common example is the social icon. They will start somewhere, but when the page clicks on a tag, the <div> is locked in a location and does not scroll along with the rest of the page.
If you want to refer to the functionality of the plug-in separately, you need to refer to affix.js.
One, usage
Additional navigation (affix) Plug-ins can be used through the data property or through JavaScript.
1, through the Data property: If you need to add additional navigation (affix) behavior to the element, simply add data-spy= "affix" to the element that needs to be monitored. Use offsets to define when to toggle the lock and move of an element.
2, through javascript: You can manually add additional navigation for an element through JavaScript (affix)
Second, through the CSS positioning
In the above two ways to use additional navigation (affix) plug-ins, you must position the content through CSS. Additional navigation (affix) Plug-ins switch between three classes, each of which presents a specific state:. Affix,. Affix-top and. Affix-bottom. Follow the steps below to set your own CSS for these three states (do not rely 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 an element that adds additional navigation (affix), the actual additional navigation (affix) should be triggered. At this point, affix replaces the. Affix-top and sets the position:fixed (provided by the Bootstrap CSS code).
3. If the bottom offset is defined, the. Affix should be replaced with. Affix-bottom when the scroll reaches that position. Because the offset is optional, if the offset is set, the appropriate CSS is required to be set at the same time. In this case, please add position:absolute when necessary;.
Third, the option
Some options are passed through the Data property or JavaScript. The following table lists the options:
Iv. examples
additional navigation that is pasted on the screen to implement the anchor point function.
1. Basic examples
<body data-spy= "Scroll" data-target= "#myScrollspy" > <div class= "container" > <div class= "Jumbotron" sty le= "height:150px" >
2, the navigation of the CSS section
ul.nav-pills {
width:200px;
}
Ul.nav-pills.affix {
top:30px;
}
JavaScript replaces the "affix" data-offset-top= "data-spy="
$ (' #myAffix '). Affix ({
offset: {
top:150
}< c11/>})
We use the default top, of course, can also default to the bottom bottom. This positioning method is directly positioned through the CSS.
Set to bottom
ul.nav-tabs.affix-bottom {
bottom:30px;
}
Set to bottom
$ (' #myAffix '). Affix ({
offset: {
bottom:150
}}
)
Affix contains several events, as follows:
Other identical
$ (' #myAffix '). On (' Affixed-top.bs.affix ', function () {
alert (' Trigger! ');
});
If you want to further study, you can click here to learn, and then attach 3 wonderful topics:
Bootstrap Learning Course
Bootstrap Practical Course
Bootstrap Plugin Usage Tutorial
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
