Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

Sticky

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.

<div style={{ display: 'flex', width: '100%', height: '400px', border: '2px dashed grey' }}>

  <Sticky>

    <div style={{ background: '#0000aa', width: '100%', height: '150px', color: '#ffffff'}}>

      Sticky to the top

    </div>

  </Sticky>

</div>

Bottom positioning

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

<div style={{ display: 'flex', width: '100%', height: '400px', border: '2px dashed grey' }}>

  <Sticky position="bottom">

    <div style={{ background: '#aa0000', width: '100%', height: '150px', color: '#ffffff' }}>

      Sticky to the bottom

    </div>

  </Sticky>

</div>

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.

<div style={{ display: 'flex', width: '100%', height: '400px', border: '2px dashed grey' }}>

  <Sticky offset={3.5}>

    <div style={{ background: '#00aa00', width: '100%', height: '150px', color: '#ffffff' }}>

      Sticky with offset

    </div>

  </Sticky>

</div>

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.

Leave feedback

Contents

All components (A-Z)