SmartSticky

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

React-Smart-Sticky

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