Skip to main content

Sticky

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

Basic Usage​

Top positioning​

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

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

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