Sticky

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 rgb(0 0 0 / 15%), 0 -.25rem .625rem rgb(0 0 0 / 15%) !default;
$sticky-shadow-bottom: 0 .5rem 1rem rgb(0 0 0 / 15%), 0 .25rem .625rem rgb(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.

    Default'top'
  • 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.