react-stuck

React component which loosely implements `position: sticky`

Usage no npm install needed!

<script type="module">
  import reactStuck from 'https://cdn.skypack.dev/react-stuck';
</script>

README

React Stuck Build Status NPM version

This is a react component that loosely implements the position: sticky.

Unlike the native implementation, it does not require a container with a certain height and will work inside one that has its overflow set to 'hidden'; provided you explicitly provide a height.

The top works as in the native implementation, so when the browser-window top reaches the defined toppx above the sticky content, the content will have position: fixed applied to it, and thus will be stuck.

Usage

<Stuck top={10} height={500}>
  <div>sticky content</div>
</Stuck>

License

MIT