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

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

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

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

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

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

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

Your Feedback:

 

We would love to hear from you! Please say something.