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:



Method Description

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

Name type default description
offset number | function | object 10 Pixels 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).


The subnavigation on the right is a live demo of the affix module.