trendingtechnology / react-smart-sticky

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

React Smart Sticky

Online Demo

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.

Licence

MIT