react-sticky-fill

A ReactJS wrapper for position:sticky elements using the Stickyfill polyfill.

Installation

It can be installed as an npm package:

$ npm install --save react-sticky-fill

Basic usage

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.

Further reading

• position:sticky on caniuse.com
• Stickyfill