Framework-agnostic scroll-spy engine

Highlight your table of contents while the page scrolls

A zero-dependency TypeScript engine that always reports the correct active section — even with smooth scrolling, click navigation and edge sections. Scroll this page to see it live.

Explore the demo

Pure TypeScript Zero dependencies MIT License Vite · jQuery · Tailwind v4

Engine configuration

Applied in real time

Live snapshot

activeId: —
activeIndex: -1
listeners: —

Hash sync

How the URL hash is synced while scrolling.

Fixed overlay 64px

Height of the fixed header overlapping the scroll area (px).

Offset ↑ 0px

Offset ↓ 0px

Anticipate or delay detection per scroll direction.

First edge · always active

80px

Last edge · always active

80px

Forced edges highlight even when the target never crosses the trigger line. A distance allows “no active target”.

Media-query gate

(min-width: 768px)

Trigger-line overlay

createDebugOverlay()