Describes how to use the Affix control in BootStrap and how to maintain a beautiful layout.

Describes how to use the Affix control in BootStrap and how to maintain a beautiful layout.

Affix is a very useful control in BootStrap. It can monitor the position of the browser's scroll bar and keep your navigation in the visible area of the page. At the beginning, navigation is a normal streaming layout on the page, which occupies a fixed position in the Document. When the page is scrolling, the navigation is automatically changed to a fixed layout (fixed ), it is always in the user's video area. The following describes its usage. First, let's look at his implementation principles. It is implemented by modifying the class attribute of page elements in real time.

The affxi-top attribute is automatically added to the class where the affix element is applied at the beginning.

When the scroll bar is scrolled so that the navigation is about to reach the top of the page, the affix-top will be changed to affix in the element class.

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

The above process is completely implemented by the control, without our intervention, we only need to write the css of these States.

For example, we can set

. Affix-top {top: 150px;}. affix {top: 20px; // generally, a navigation bar exists in the header of a website built with bootstrap.}. affix-bottom {......}

Next let's take a look at its usage

1. data attributes

You only need to add data-spy = "affix" to the page element to be listened. Then, the offset is used to determine whether an element is enabled or disabled.

<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> 

Data-offset-top is the position of the element in the affix-top state from the top of the page. When you scroll to the top of the page, you can set the ". affix" style to reset its "top" value.

2. javascript call

The sample code is as follows:

$ ('# Mynav '). affix ({offset: {top: 100, // The position bottom: function () {// return (this. bottom = $ ('. bs-footer '). outerHeight (true ))}}})

The HTML code is as follows (only core code is displayed ):

<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>

The above seems to have completed the use of affix in bootstrap, but in actual use, we will find that the width of the page element that uses affix changes when the scroll bar is dragged, as a result, the page layout is messy. Therefore, the width of the css that defines affix is best written as follows:

.affix{width:250px;}

In this way, there is no problem when the window is large enough, but when the size of the window is changed by dragging, the layout becomes messy, which has plagued me for a long time, finally, by analyzing the source code of bootcss, I found that "hidden-print" "hidden-xs" hidden-sm "were added to all classes using affix, it is used to hide affix when the screen does not meet the requirements. Although it affects the usability, it ensures that the layout is neat in either case.

The above section describes how to use the Affix control in BootStrap and how to maintain the beautiful layout. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!