Bootstrap Affix
Bootstrap affix plugin is used to add affix behavior to any element.
Creating Pinned Element with Bootstrap
In this tutorial you will learn how to apply pinning i.e. fixed positioning on a navbar or any other element automatically when they are scrolled beyond a certain distance as well as toggle its pinning on and off using the Bootstrap affix plugin. 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 plugin toggles between three classes: .affix, .affix-top, and .affix-bottom. Each class represents a particular state.
- Initially, the plugin adds
.affix-topor.affix-bottomclass 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 plugin replaces the.affix-topor.affix-bottomclass with the.affixclass (setsposition: fixed;), which trigger the actual affixing. - At this point the appropriate CSS
toporbottomproperty is required to determine the position of affix element on the viewport.
Let's check out the following example to see it 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="195">
<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: $(".header").outerHeight(true)
}
});
});
</script>
Options
There are certain options which may be passed to affix() Bootstrap method to customize the functionality of the affix plugin.
| 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 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. |
You can also set these options for affix using the data attributes — just append the option name to data-, like data-offset-top="195".
Methods
These are the standard bootstrap's affix methods:
.affix(options)
This method activates your content as affixed content. Accepts an optional options object, like offset: {top: 10} or offset: {top:50, bottom:100}.
Example
Try this code »<script type="text/javascript">
$(document).ready(function(){
$("#myNav").affix({
offset: {bottom: 195
}
});
});
</script>
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>
