Paragon Design System

Theme

Content
npm_versionnpm Paragon package page

Sticky

Edit this pagein a new tabLeave feedbackin a new tab

Makes elements remain at the top or bottom of the viewport, like a sticky navbar.

Basic Usage

Top positioning

Any Paragon component or export may be added to the code example.

Bottom positioning

Any Paragon component or export may be added to the code example.

With offset

Valid offset values are the same as for the spacing classes.

Any Paragon component or export may be added to the code example.

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;

Props API#

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.

Edit this pagein a new tabLeave feedbackin a new tab

Contents

All components (A-Z)