⚠ Unmaintained! react-stickyfill did a good job while the browsers were implementing position: sticky support. You can now safely use stickies without a polyfill, all modern browsers support them natively.
React wrapper for Stickyfill library
npm install react-stickyfill --save
Simple usage:
import React, {Component} from 'react';
import Sticker from 'react-stickyfill';
class SomeComponent extend Component{
render() {
return (
<div>{/* Parent Element. */}
<Sticker>
<div>{/* Sticky Element */}</div>
</Sticker>
</div>
);
}
}Parent Element should have height greater than Sticky Element. Sticky Element should have style position: sticky and top: {some value}.