New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/twitter-bootstrap-affix/
Twitter Bootstrap Affix
Creating Pinned Element with Twitter Bootstrap
In this tutorial we will learn how to create a pinned (fixed positioned) element and toggle it’s pinning on and off using Twitter Bootstrap affix plug-in. The pinning of an element is enabled through changing the value of its position CSS property from static to fixed.
To do this, the affix plug-in toggles between three classes: .affix, .affix-top, and .affix-bottom. Each class represents a particular state.
Initially, the plug-in adds .affix-top or .affix-bottom class to indicate the element is in its top-most or bottom-most position.
When the element scrolling past the offset limit provided by the "data-offset-" attribute the plug-in replaces the .affix-top or .affix-bottom class with the .affix class (sets position: fixed;), which trigger the actual affixing.
At this point the appropriate CSS top or bottom property is required to determine the position of affix element on the viewport.
Check out the following example to see the affix plug-in in real action.
Enable Affix via Data Attributes
You can easily add affix behavior to any element — just add data-spy="affix" to the element you want to spy on. Then use "data-offset-" attributes to define when to toggle the pinning of an element ‘on’ and ‘off’.
Example
Try this code »
<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
<li class="active"><a href="#one">Section One</a></li>
<li><a href="#two">Section Two</a></li>
<li><a href="#three">Section Three</a></li>
</ul>
Note:The "data-offset-" attributes only specify how many pixels that you must scroll in order to toggle the pinning of an element, it did not set the position of pinned element. You must define the top or bottom CSS property for the pinned element specifically in your style sheet to set its position in the viewport.
Enable Affix via JavaScript
You may also enable the affix plugin manually using the JavaScript — just call the affix() method with the "id" or "class" selector of the required element in your JavaScript code.
Example
Try this code »
<script type="text/javascript">
$(document).ready(function()
$("#myNav").affix(
offset:
top: 190
);
);
</script>
Options
There are certain options which may be passed to affix() Bootstrap method to customize the functionality of the affix plug-in.
Name Type Default Value Description offset number | function | object 10 Specify the number of pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To set offset for a single direction, or multiple unique offsets — just provide an object like offset: top:50, bottom:100
You can also use a function if you want to dynamically provide an offset in case of responsive designs.
target selector | node | jQuery element the window object Specifies the target element of the affix.
Events
Bootstrap’s affix class includes few events for hooking into modal functionality.
Event Description affix.bs.affix This event fires immediately before the element has been affixed. affixed.bs.affix This event is fired after the element has been affixed. affix-top.bs.affix This event fires immediately before the element has been affixed to top. affixed-top.bs.affix This event is fired after the element has been affixed to top. affix-bottom.bs.affix This event fires immediately before the element has been affixed-bottom. affixed-bottom.bs.affix This event is fired after the element has been affixed to bottom.
The following example displays an alert message when navigation menu has been affixed.
Example
Try this code »
<script type="text/javascript">
$(document).ready(function()
$("#myNav").on('affixed.bs.affix', function()
alert("The navigation menu has been affixed. Now it doesn't scroll with the page.");
);
);
</script>