Affix is a useful control in BootStrap, which can monitor the position of the browser's scrollbar and keep your navigation in the visible area of the page at all times. At the beginning, navigation was a normal streaming layout in the page, occupying a fixed position in the document. When the page scrolled, navigation automatically became a fixed layout (fixed), always in the user's viewing area. Let's talk about its usage. First, let’s take a look at its implementation principle. It is achieved by modifying the class attributes of page elements in real time
At the beginning, the affxi-top attribute will be automatically added to the class of the element that applies affix.
When the scrollbar scrolls so that the navigation is about to reach the top of the page, the affix-top will be changed to affix in the element's class.
When dragging the scrollbar to the bottom of the page, affix will automatically change to affix-bottom again
The above process is completely implemented by the control itself, and we do not need to intervene. We just need to write the css in these states.
If we can set
.affix-top
{
top:150px;
}
.affix
{
top:20px;//There are usually navigation bars on the head of the website built with bootstrap}
.affix-bottom
{
……
}
Let's take a look at how to use it
1. Pass the data attribute
You just need to add data-spy="affix" to the page element you need to listen to. Then use offsets to determine the on and off of an element.
<ul class="nav nav-tabs nav-stacked affix" data-spy="affix" data-offset-top="190"> <li class="active"><a href="#one">Tutorial One</a></li> <li><a href="#two">Tutorial Two</a></li> <li><a href="#three">Tutorial Three</a></li> </ul>
where data-offset-top is the position where the affix-top state element is located from the top of the page. When scrolling to the top of the page, we can set the ".affix" style to reset its "top" value.
2. Calling through javascript
The sample code is as follows:
$('#myNav').affix({
offset: {
top: 100,//Scroll the position from the top of the pagebottom: function () {//The position from the bottom of the page when the scrolling is completedreturn ( =
$('.bs-footer').outerHeight(true))
}
}
})
The HTML code is as follows (only the core code is displayed):
<ul class="nav nav-tabs nav-stacked affix" > <li class="active"><a href="#one">Tutorial One</a></li> <li><a href="#two">Tutorial Two</a></li> <li><a href="#three">Tutorial Three</a></li> </ul> …… <div class="bs-footer"> </div>
The above seems to have introduced the use of affix in bootstrap, but in the actual use process, we will find that when dragging the scrollbar, the width of the page elements using affix will change, resulting in messy page layout. Therefore, it is best to write down its width in the CSS that defines affix, such as:
.affix{
width:250px;
}
In this way, there is no problem when the window is large enough, but when you drag and change the size of the window, you will find that the layout is messed up again. This problem has troubled me for a long time. Finally, by analyzing the source code of bootcss, I found that the website has added "hidden-print", "hidden-xs", "hidden-sm" attributes to all the classes of elements that use affix, which can hide affix when the screen does not meet the requirements. Although it affects the ease of use, it ensures that the layout is neat in any case.
The above is a detailed explanation of the use of Affix controls in BootStrap and the way to maintain the beautiful layout. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!