react-keep-visible

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.

live demo

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.