Explain in detail the use of Affix control in BootStrap and the method of keeping the layout beautiful

Affix is a useful control in BootStrap that monitors the position of the browser's scroll bar and keeps your navigation in the visual area of the page at all times. 1 At the beginning, navigation is a common streaming layout in the page, occupying a fixed position in the document. When the page scrolls, navigation automatically becomes a fixed layout (fixed), which is always in the user's visual area. Let's talk about his usage below. First, let's look at his implementation principle. It is achieved by modifying the class attributes of page elements in real time

affxi-top attributes are automatically added to the class of the element where affix is applied at the beginning

When the scroll bar scrolls so that the navigation is almost to the top of the page, affix-top will be changed to affix in class of the element

When you drag the scroll bar to the bottom of the page, affix automatically changes to affix-bottom

The above process is completely implemented by the control itself, without our intervention, we only need to write css in these states

If we can set

.affix-top
{
top:150px;
}
.affix
{
top:20px;// Usually used bootstrap The website you build has a navigation bar at the head 
}
.affix-bottom
{
 ... 
} 

Let's take a look at how to use it

1. Pass the data attribute

All you need to do is add data-spy= "affix" to the page element you want to listen to. Then use the offset to determine the opening and closing of 1 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 of the affix-top state element from the top of the page. When scrolling to the top of the page we can reset its "top" value by setting the ". affix" style.

2. Call through javascript

The sample code is as follows:

$('#myNav').affix({
offset: {
top: 100,// The position from the top of the page in scrolling 
bottom: function () {// The position from the bottom of the page when scrolling is completed 
return (this.bottom = 
$('.bs-footer').outerHeight(true))
}
}
}) 

The HTML code is as follows (only the core code is shown):

<ul class="nav nav-tabs nav-stacked affix" id="myNav">
<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>

It seems that the use of affix in bootstrap has been introduced above, but in the actual use process, we will find that the width of page elements using affix will change when dragging scroll bars, which will lead to clutter of page layout. Therefore, it is best to write its width in css that defines affix as follows:

.affix{
width:250px;
}

So there is no problem when the window is large enough. But when you drag to change the size of the window, you will find that the layout is messed up again. This problem has puzzled me for a long time. Finally, by analyzing the source code of bootcss, I found that the website added these attributes of "hidden-print", "hidden-xs" and "hidden-sm" in all class 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 either case.