CSS - Sticky positioning (Pinning)


Sticky positioning keep the box in view within its containing block as the user scrolls.

The element is treated as relative positioned while scrolling until it crosses a specified threshold (generally the top of the containing box), at which point it is treated as fixed positioned.

The pinning (sticking) of an element is enabled through:



The Bootstrap Affix plugin toggles between three classes:

  • .affix,
  • .affix-top (top-most position)
  • .affix-bottom (bottom-most position)

Each class represents a particular state.

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.

Documentation / Reference

Powered by ComboStrap