# imakewebthings/waypoints

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/imakewebthings-waypoints).**

10,317 stars · 1,297 forks · JavaScript

## Links

- GitHub: https://github.com/imakewebthings/waypoints
- Homepage: http://imakewebthings.com/waypoints/
- awesome-repositories: https://awesome-repositories.com/repository/imakewebthings-waypoints.md

## Description

Waypoints is a JavaScript library designed for monitoring scroll positions and managing viewport-based triggers. It provides utilities to execute functions when page elements enter or exit the visible browser area, track specific scroll offsets, and implement sticky element pinning.

The library includes specialized tools for building infinite scrolling interfaces that fetch and append content to replace traditional pagination. It also manages the positioning of elements that transition to a fixed screen location once a specific scroll threshold is reached.

The system covers broader capabilities in viewport interaction and scroll management, including visibility detection, direction-aware event dispatching, and the coordination of grouped triggers to synchronize state and execution order.

## Tags

### Software Engineering & Architecture

- [Scroll-Position Event Triggers](https://awesome-repositories.com/f/software-engineering-architecture/scroll-position-event-triggers.md) — Detects when specific elements reach defined scroll offsets to trigger custom actions and animations.
- [Scroll Direction Detectors](https://awesome-repositories.com/f/software-engineering-architecture/asynchronous-event-dispatchers/reactive-event-dispatchers/scroll-direction-detectors.md) — Provides logic to determine if elements are entered from above or below based on scroll direction.

### User Interface & Experience

- [Viewport Action Triggers](https://awesome-repositories.com/f/user-interface-experience/action-trigger-components/viewport-action-triggers.md) — Provides a system for executing specific JavaScript functions when page elements enter or exit the browser's visible area. ([source](https://cdn.jsdelivr.net/gh/imakewebthings/waypoints@master/README.md))
- [Item Visibility Detection](https://awesome-repositories.com/f/user-interface-experience/item-visibility-detection.md) — Monitors whether specific page elements are currently visible within the browser window. ([source](https://cdn.jsdelivr.net/gh/imakewebthings/waypoints@master/README.md))
- [Visibility-Triggered Actions](https://awesome-repositories.com/f/user-interface-experience/viewport-managers/visibility-triggered-actions.md) — Triggers specific UI actions or animations when elements enter or exit the browser's visible area.
- [Sticky Elements](https://awesome-repositories.com/f/user-interface-experience/sticky-elements.md) — Pins page elements to a fixed screen position once a specific scroll threshold is reached.

### Web Development

- [Visibility Control](https://awesome-repositories.com/f/web-development/dom-element-manipulators/visibility-control.md) — Monitors and manages the visibility state of DOM elements to trigger associated functions.
- [Infinite Scroll Implementations](https://awesome-repositories.com/f/web-development/infinite-scroll-implementations.md) — Implements mechanisms for automatically loading and appending paginated content as the user scrolls.
- [Viewport Observers](https://awesome-repositories.com/f/web-development/viewport-observers.md) — Implements utilities to track when elements enter or exit the browser viewport using observer APIs.
- [Pinning Wrappers](https://awesome-repositories.com/f/web-development/dom-element-manipulators/element-node-wrapping/pinning-wrappers.md) — Uses container wrappers to maintain page layout while pinning elements to a fixed position.

### System Administration & Monitoring

- [Scroll-Offset Thresholds](https://awesome-repositories.com/f/system-administration-monitoring/threshold-monitoring/scroll-offset-thresholds.md) — Calculates custom pixel-distance offsets to define precise scroll thresholds for triggering UI changes.

### Part of an Awesome List

- [滚动侦测(ScrollSpy)](https://awesome-repositories.com/f/awesome-lists/more/scrollspy.md) — Listed in the “滚动侦测(ScrollSpy)” section of the Awesome Frontend awesome list.