A ReactJS wrapper for position:sticky elements using the Stickyfill polyfill.
It can be installed as an npm package:
$ npm install --save react-sticky-fill
You just import the Sticky
component and pass your content as the single child:
import React from 'react'
import Sticky from 'react-sticky-fill'
(
<Sticky>
<MyComponent>Hey, I am sticky!</MyComponent>
</Sticky>
)
The necessary css is inlined
, the polyfill is automatically added on mount.
If you want to override top (default: 0)
(or any other css property), you can do so by passing a className
or through style
.
import React from 'react'
import Sticky from 'react-sticky-fill'
(
<Sticky className="my-custom-sticky">
I stick
</Sticky>
)
(
<Sticky style={{top: '15px'}}>
I stick too
</Sticky>
)
The component passes through every other prop, just like the ones shown above.
- position:sticky on caniuse.com
- Stickyfill