Skip to content
React to scroll events: animate components, lazy load data, infinite scroll
JavaScript CSS HTML
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 Add github pages Dec 16, 2017
src
.babelrc
.eslintrc.json
.gitignore
.travis.yml Use pages dir Dec 16, 2017
LICENSE
README.md Fix examples link Dec 23, 2017
index.html
package-lock.json Fix examples link Dec 23, 2017
package.json Fix examples link Dec 23, 2017
postcss.config.js Add github pages Dec 16, 2017
webpack.config.js
webpack.config.pages.js Fix webpack config Dec 16, 2017

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.