Sticky Element Library For React – react-sticky-el

react-sticky-el is a simple React component to make elements fixed on the top of the screen when scrolling.

Installation:

# NPM
$ npm install react-sticky-el  --save

Usage:

import React, {Component} from 'react';
import Sticky from 'react-sticky-el';

class App extends Component ({
  render() {
    return (
        <Sticky>
          <header>
            ...
          </header>
        </Sticky>
    );
  },
});

Default props.

{
  className: '',
  style: {},
  mode: 'top',
  holderCmp: 'div',
  holderProps: {},
  wrapperCmp: 'div',
  stickyClassName: 'sticky',
  stickyStyle: null,
  hideOnBoundaryHit: true,
  boundaryElement: null,
  scrollElement: 'window',
  topOffset: 0,
  bottomOffset: 0,
  noExceptionOnMissedScrollElement: false,
  positionRecheckInterval: 0
};

Preview:

Download Details:

Author: gm0t

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/gm0t/react-sticky-el

License: MIT