Explain the use of affix controls in bootstrap and how to maintain the layout of the beautiful method _javascript skills

Affix is a useful control in bootstrap, and he is able to monitor the position of the scroll bar of the browser and keep your navigation in the viewable area of the page. In the beginning, navigation in the page is a normal flow layout, occupy a fixed position in the document, when the page scrolling, the navigation automatically becomes a fixed layout (fix), always in the user's viewport, the following to say his usage. First, let's look at the principle of his implementation. It is implemented by modifying the class attribute of the page element in real time.

The Affxi-top attribute is automatically added to the class in which the affix element is applied at the beginning

When the scroll bar scrolls so that the navigation is almost at the top of the page, the affix-top is changed to affix in the element's class.

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

The above process is fully implemented by the control itself, without our intervention, we just have to write these state CSS can be

If we can set

. affix-top
{
top:150px
}
. Affix
{
top:20px;//typically have a navigation bar on the head of a site built with Bootstrap
}
. affix-bottom
{
...

Let's see how it's used.

1, through the Data property

You simply add data-spy= "affix" to the page elements that you need to listen to. The offset is then used to determine the opening and closing 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>

Where Data-offset-top is the position at the top of the page where the Affix-top state element is located. When scrolling to the top of the page, we can set the ". Affix" style to reset its "up" value.

2. Call through JavaScript

The sample code is as follows:

$ (' #myNav '). Affix ({
offset: {top:100,//) the position at the
top of the page
bottom:function () {////The position
at the bottom of the page when scrolling completes 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>
><a href= "#three" >tutorial three</a></li>
</ul> ...
<div class= "Bs-footer" >
</div>

The above seems to have covered the use of affix in bootstrap, but in the actual use of the process we will find that when you drag the scroll bar to use the affix page element width will change, resulting in the layout of the page clutter, So we'd better write down the width of the CSS in the definition affix:

. affix{
width:250px;
}

This is not a problem when the window is big enough, but when the drag changes the size of the window will find the layout again, this problem plagued me for a long time, finally through the analysis of BOOTCSS source code I found that the site in all the elements of the use of affix added " Hidden-print "Hidden-xs" "HIDDEN-SM" These properties are used to hide affix when the screen is not compliant, although it affects ease of use, but ensures that the layout is neat in either case.

The above is a small set to introduce the detailed bootstrap in the affix control of the use and maintain the layout of the beautiful method, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!