Bootstrap Affix Plugin

Affix plugin allow to pinned element on the page and you can toggle it’s pinning on and off using this Bootstrap Affix Plugin. The pinning of any tag or element is enabled via changing the value of CSS property “position” from static to fix. In this tutorial we will learn that how to use Affix plugin.

If you want to implement functionality of this plugin individually, simple include the affix.js file along the other JS files. Else as we have discussed in the tutorial of Bootstrap Plugin Overview, you can include bootstrap.jsor the minified bootstrap.min.js.

Usage

You can use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content.

Via data attributes

To easily add affix behavior to any element, just add data-spy=”affix” to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.

Example

This example shows the usage via data attributes:

Via JavaScript

You can call the affix plugin manually with JavaScript as below:

Example

This example show the usage via data attributes:

Positioning via CSS

In both the above situations, you must provide CSS for the positioning of your content. The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. These following steps will help you to set your CSS for either of the above usage options.

  • To start, the plugin adds .affix-top to indicate the element is in it’s top-most position. At this point no CSS positioning is required.

  • Scrolling past the element you want affixed should trigger the actual affixing. This is where .affix replaces .affix-top and sets position: fixed; (provided by Bootstrap’s code CSS).

  • If a bottom offset is defined, scrolling past that should replace .affix with .affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position: absolute; when necessary.

Options

There are some options can be passed via data attributes or JavaScript are listed below. For data attributes, append the option name to data-, as in data-offset-top="200".

Option Name Type Default Data attribute name Description
offset number | function | object 10 data-offset 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 provide a unique, bottom and top offset just provide an object offset: { top: 10 } or offset: { top: 10, bottom: 5 }. Use a function when you need to dynamically calculate an offset.
target selector | node | jQuery element the window object data-taget Specifies the target element of the affix.

Events

Bootstrap’s affix class exposes a few events for hooking into affix functionality.

Event Type 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-top.
affixed-top.bs.affix This event is fired after the element has been affixed-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-bottom.

Leave a Reply

Your email address will not be published. Required fields are marked *