React component for sticky topbar that will hide when scrolling down

SmartSticky

SmartSticky is React component for sticky topbar that will hide when scrolling down and show when scrolling up.

Features

  • Works like topbars in native applications (Facebook, Medium.com, Instagram etc.)
  • Works on mobile devices
  • Topbar dissappears 'with the flow' of scrolling - if you'll stop scrolling - sticky element will stop it's movement too.

Usage

npm install react-smart-sticky --save
import SmartSticky from 'react-smart-sticky';

...

<SmartSticky>
  <div>Some topbar content or whatever you need</div>
</SmartSticky>

Additional options

<SmartSticky tolerance={50}>
  <div>Some topbar content or whatever you need</div>
</SmartSticky>

tolerance is ammount of pixels needed to be scrolled before sticky element will start to show/hide.

GitHub