How to use the affix control in bootstrap and how to keep the layout beautiful

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

• The Affxi-top attribute is automatically added to the class of the element that applies affix when it starts

• When the scroll bar scrolls so that the navigation is near the top of the page, the affix-top becomes affix in the element's class.

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

The above process completely has the control to implement itself, without our intervention, we only need to write the CSS of these states can be

If we can set

. affix-top{top:150px;}. affix{top:20px;//usually build a Web site with bootstrap with a navigation bar}.affix-bottom{...}

Now let's see how it's used.

1. Through the Data property

You just need to add data-spy= "affix" to the page element you want to listen to. The offset is then used to determine the opening and closing of an element.

Key code

<ul class= "Nav nav-tabs nav-stacked Affix" data-spy= "affix" data-offset-top= "" > <li clas S= "Active" ><a href= "#one" >tutorial one</a></li> <li><a href= "#two" >tutorial Tw o</a></li> <li><a href= "#three" >tutorial three</a></li></ul>

Where Data-offset-top is the position in the Affix-top state element from the top of the page. When scrolling to the top of the page use we can set the ". Affix" style to reset its "top" value.

2. Call via JavaScript

The sample code is as follows:

$ (' #myNav '). Affix ({offset: {top:100,//) the position at the top of the page in the scroll bottom:function () {///the position from the bottom of the page when scrolling is complete return (th Is.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" >tuto Rial one</a></li> <li><a href= "#two" >tutorial two</a></li> <l I><a href= "#three" >tutorial three</a></li></ul>......<div class= "Bs-footer" ></div >

The above seems to have introduced the use of bootstrap in the affix, but in the actual use of the process we will find that when the scroll bar is used when the width of the page element affix will change, resulting in a messy layout of the page, So we'd better write the width of the affix in the CSS that defines it as:

. affix{width:250px;}

This is not a problem when the window is large enough, but when the drag changes the size of the window will find the layout and chaos, this problem plagued me for a long time, finally through the analysis of the source of bootcss I found that the site in all the elements using affix in the class has been 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 every case.

The above is a personal use of some of the experience, if you have any confusion or experience to share can be in the way of comments feedback to me

How to use the affix control in bootstrap and how to keep the layout beautiful