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 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
nodeRequiredSpecifies content of the component.
- position
enum'top' | 'bottom'Default'top'Specifies position of the element.
- offset
number|stringSpecifies offset from top/bottom depending on the
positionproperty.Valid values are based on
the spacing classes:0, 0.5, ... 6. - className
stringSpecifies an additional
classNameto add to the base element.