react-sticky-wrapper v1.1.7

react-sticky-wrapper

English | 中文说明

ReactFixedSticky Component

Using position:fixed to realize sticky to top, only support the top of the wrapped element, but pay attention to the fixed position on the position: absolute | relative element.

• Default top fixed element are props.children;
• scrollRoot : Custom scrollRoot, default automatically find the scrolling root element
• bounds: Customize the distance between the top element and the root of the scroll, unit px

ReactTransformSticky Component

Using transform rolling to realize any element that needs to fixed, one or more top lifting element selectors can be customized, with high degree of freedom, but the disadvantage is that there will be shake when fast rolling, so the general scene chooses ReactFixedSticky component, but when one or more top lifting elements need to be customized, you should use ReactTransformSticky component.

• Default top fixed element are props.children, but you can customize more than one by targetNodeList
• scrollRoot : Custom scrollRoot, default automatically find the scrolling root element
• bounds: Customize the distance between the top element and the root of the scroll, unit px

install

npm install --save react-sticky-wrapper
# or
yarn add react-sticky-wrapper

example

import { ReactFixedSticky, ReactTransformSticky } from 'react-sticky-wrapper';

<ReactFixedSticky scrollRoot={document.body}>
 fixed Sticky
</ReactFixedSticky>

...

<ReactTransformSticky scrollRoot={document.body}>
 transform Sticky
</ReactTransformSticky>

ReactFixedSticky Attributes

ReactTransformSticky Attributes