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
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.