Skip to content
React to scroll events: animate components, lazy load data, infinite scroll
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
pages
src
.babelrc
.eslintrc.json
.gitignore
.travis.yml
LICENSE
README.md
index.html
package-lock.json
package.json
postcss.config.js
webpack.config.js
webpack.config.pages.js

README.md

react-on-scroll

Travis dependencies devDependencies downloads

React to scroll events: animate components, lazy load data, infinite scroll

Props

  • className string optional css class name

  • triggerBase string "top"|"bottom" optional which border of the element will be used to compute the distance from the top and bottom of the screen. If not set the callback will trigger with true when any part of the element is between top and bottom

  • triggers array of objects with the following keys

    • top number optional distance from top of the screen to trigger the state change (negative numbers are off screen)
    • bottom number optional distance from bottom of the screen to trigger the state change (negative numbers are off screen)
    • repeat number optional maximum number of times to execute the callback
    • callback function(visible: boolean) the function to call each time the visibility state changes

Triggers

[
  { top: 50, bottom: 100, callback: visible => doSomething(visible) },
]
// triggerBase = "top"
// will trigger with visible=true when the top border of the element is between 50px from top and 100px from bottom


// triggerBase = undefined
// will trigger with visible=true when any part of the element is between 50px from top and 100px from bottom

Examples

https://github.com/erichbehrens/react-on-scroll/tree/master/src/pages/components

Sticky section header

Implementation

import OnScroll from 'react-on-scroll';

class Sticky extends React.Component {
	state = {
		sticky: false,
	};

	setSticky = sticky => this.setState({ sticky });

	render() {
		const { title, children } = this.props;
		const { sticky } = this.state;
		return (
			<OnScroll
				className="section"
				triggers={[
					{ top: 50, bottom: -50, callback: visible => this.setSticky(visible) },
				]}
			>
				<div>
					<div className={`title ${sticky ? 'sticky' : 'inline'}`}>
						<h2>{title}</h2>
					</div>
					<div className="content">{children}</div>
				</div>
			</OnScroll>
		);
	}
}

export default Sticky;

Usage

<Sticky title="Section title">
	content
</Sticky>
You can’t perform that action at this time.