CSS - Sticky positioning (Pinning)

About

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:

Example

Bootstrap

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