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

    Specifies content of the component.

  • position enum Required'top' | 'bottom'

    Specifies position of the element.

    Default'top'
  • offset number Required | string Required Required

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

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

  • className string Required

    Specifies an additional className to add to the base element.

Contents

Guides

Foundations

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)