waypoints
Waypoints is a library that makes it easy to execute a function whenever you scroll to an element.
Waypoints is a tiny JavaScript library that runs a function when the user scrolls to a specific element, with built-in shortcuts for infinite scroll, sticky elements, and viewport enter/exit detection.
Waypoints is a small JavaScript library with one job: run a function when a user scrolls to a specific element on a page. For example, you could use it to trigger an animation when a section comes into view, load more content when the user reaches the bottom of a list, or make a navigation bar stick to the top of the screen once someone scrolls past the header.
The core concept is simple. You point Waypoints at an HTML element and give it a handler function. When the browser's scroll position reaches that element, the handler fires. The handler also receives a direction value so you know whether the user scrolled down to reach the element or scrolled back up past it.
Beyond the basic scroll-trigger behavior, the library includes three extension shortcuts for common patterns. Infinite scrolling loads additional content automatically when the user nears the bottom of a page. Sticky elements make a header, menu, or sidebar lock in place as you scroll past a certain point. Inview detection fires events when an element enters or leaves the visible area of the screen.
The README is short and points to external documentation for full usage details. It notes that questions about how to use the library should go to Stack Overflow rather than the GitHub issue tracker, which is reserved for bug reports and code contributions. The project carries an MIT license and dates back to 2011.
Where it fits
- Trigger a CSS animation when a section scrolls into the visible area of a landing page.
- Load more content automatically when a user reaches the bottom of a list.
- Make a navigation bar stick to the top of the screen after the user scrolls past the page header.