react-sticky-wrapper

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

name	type	defaultValue	description
scrollRoot	`string / HTMLElement`	-	the root element when scrolling，default automatically find the scrolling root element
bounds	`{ left?: number, top?: number }`	`{top: 0}`	the bounds to scrolling root element when fixed, unit `px`

ReactTransformSticky Attributes

name	type	defaultValue	description
scrollRoot	`string / HTMLElement`	-	the root element when scrolling，default automatically find the scrolling root element
bounds	`{ left?: number, top?: number }`	`{top: 0}`	the bounds to scrolling root element when fixed，unit `px`
targetNodeList	`HTMLElement[] / string[]`	`props.children`	element that need to fixed，default `props.children`