react-keep-visible
v2.0.1
Published
Attempt to keep an element within the viewport as the user scrolls
Downloads
721
Readme
React Keep Visible [BETA]
Keep an element in the viewport (within the bounds of its parent container) while the user scrolls.
Similar to position 'sticky', except it intelligently switches between sticking to the top and bottom edge to allow scrolling through the entire element.
Vanilla sticky counter example: demo
Installation
npm install react-keep-visible
or
yarn add react-keep-visible
Usage
<KeepVisible>
[ element ]
</KeepVisible>
Notes
To do: support 'top' & 'bottom' offsets.
Margins added to the element kept visible will negatively impact positioning. Try padding instead.