/ Scroll

React component for sticky topbar that will hide when scrolling down

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.

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