This demonstrates Issue #108 in React-Waypoint.
- Clone this repository
- Run
npm install
from the root directory of the repo - Open
index.html
in your browser - Scroll around with the console open
The grey square represents the bottom 20% of the viewport. In this example, the scrollableAncestor
is the window, meaning that the boundaries of React Waypoint will be the viewport boundaries.
However, topOffset
has been specified as 80%, meaning that the top boundary has been scooted down by that much. This means that only the bottom 80% of the viewport will be the area in which waypoints are considered "inside," which will affect when the enter and leave events are triggered.