Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

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 -0.5rem 1rem rgba(0, 0, 0, 0.15), 0 -0.25rem 0.625rem rgba(0, 0, 0, 0.15) !default;
$sticky-shadow-bottom:                0 0.5rem 1rem rgba(0, 0, 0, 0.15), 0 0.25rem 0.625rem rgba(0, 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.

Contents

Guides

Foundations

Components

Buttonlike
Choreography
Content
Forms
Forms (deprecated)
Hooks
Imagery & Iconography
Layout
Navigation
Overlays
Status & metadata
Table

All components (A-Z)