Bootstrap JS Plug-in use Example (10)-Additional navigation (affix)

Bootstrap-affix.js components, literal translation is fixed, the typical application is navigation, that is, when the page content too much appear when the scroll bar of the floating navigation, such as the left side of the official web page navigation (the following picture). In fact, this component is very simple, that is, by detecting the scrolling position to dynamically add or remove affix, affix-top, affix-bottom three styles, so that navigation is still in a suitable position. When using the tag method, the page loaded, the JS plugin will search the page all [data-spy= "affix"] elements, and then find its data-offset-top or Data-offset-bottom properties, that is, from the top (bottom) of the page less than how much px, Then add or remove the three styles above.

The following describes how to use the

introduce file view source print? 1. <link href= "Http://www.see-source.com/bootstrap/css/bootstrap.css" rel= "stylesheet" > 2. <script type= "Text/javascript" src= "Http://www.see-source.com/bootstrap/js/jquery.js" ></script> 3. <script type= "Text/javascript" src= "Http://www.see-source.com/bootstrap/js/bootstrap-affix.js" ></script > define Style definition. Affix. affix-top. Affix-bottom style. Specific role when the page is scrolling:

1. When the top of the document is less than the top of the window to a specified value (threshold), the. Affix-top style is added to the bound element to control the distance between the bound element and the top of its parent element, thereby controlling the distance from the top of the window.

2. When the bottom of the binding element is less than the distance at the bottom of the window from a set value (the threshold), the. Affix-bottom style is added to the binding element to control the distance from the bottom of its parent element of the bound element, thereby controlling the distance from the bottom of the window.

3. In other cases, the bound element will have a. Affix style.

View Source print? Ul{background-color: #66FF33; list-style-type:none;} Affix {top:50px; 04.}