Affix Module


Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

<div data-spy="affix" data-offset-top="200">...</body>

Heads up! It's up to you to manage the position of a pinned element. This is done by styling affix, affix-top, and affix-bottom.

Via JavaScript

Call the affix plugin via JavaScript:




When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:



Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

offsetnumber | function | object10Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object offset: { x: 10 }. Use a function when you need to dynamically provide an offset (useful for some responsive designs).