Makes elements remain at the top or bottom of the viewport, like a sticky navbar.

Basic Usage

Top positioning

Bottom positioning

With offset

Valid offset values are the same as for the spacing classes.

Theme Variables (SCSS)#

$sticky-offset: 0 !default;
$sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15) !default;
$sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15) !default;
Sticky Props API
  • children node Required

    Specifies content of the component.

  • position enum'top' | 'bottom'

    Specifies position of the element.

  • offset number | string

    Specifies offset from top/bottom depending on the position property.

    Valid values are based on the spacing classes: 0, 0.5, ... 6.

  • className string

    Specifies an additional className to add to the base element.