react-fix

This lightweight, performant and easy to use react component allows you make your elements sticky. Handles the cases when fixed element height is dynamic and your sticky target element is taller than viewport.

Installation

npm install react-fix

Overview

React-fix could be used in bounded or unbounded mode. Just wrap your react component with fixed element into <Fix> container. This will provide your element with sticky behaviour on scroll/resize events.

This library also handles the cases when height of a fixed element is taller or smaller then the viewport. Basic case: the element's height is less than the viewport. Result: when you scroll down, the element will stick to the top of the page. Second case: fixed element is taller than the viewport. In this case, sticky target is scrolled as usual until the viewport will reach is's bottom. Then it'll stick to bottom of the screen.

This mechanics is aimed to show the content of a sticky element as much as possible. Typically used for showing and AD's blocks. The fixed's DOM-structure can even change dynamically (e.g. AD content is loaded after the react page is rendered). This has no affect on sticky target behaviour. Mutation observer is used for dom structure change detection. Request Animation Frame is used to debounce excess position recalculation events to have better performance.

Bounded mode will limit your target sticky element by the height of a container. It won't scroll down below the parent container <Bounds>.

Examples

Demo Unbounded mode

import React from 'react';
import Fix from 'react-sticky';
 
class App extends React.Component ({
  render() {
    return (
      ...
      <Fix>
        <div>
          Some content is fixed to the end of the window
        </div>
      </Fix>
      ...
    );
  }
});

Demo Bounded mode

import React from 'react';
import { Bounds, BoundedFix } from 'react-fix';
 
class App extends React.Component ({
  render() {
    return (
      ...
      <Bounds style={{ height: '2000px' }}>
        <BoundedFix>
          <div>
            Some content is fixed by FixZone element boundaries
          </div>
        </BoundedFix>
      </Bounds>
      ...
    );
  }
});

Feedback

Please, feel free to open an issue or submit PR

License

MIT