NavJumpPills
Anchor-pill jump nav for long stacked pages — one pill per section; click smooth-scrolls to it, and a built-in window scroll-spy highlights the pill for the section currently under the bar.
Scroll the page — the pill above highlights while this section's top is under the bar. Click a pill to smooth-scroll here. Above the first section nothing is highlighted; at the very bottom of the page the last pill wins.
Scroll the page — the pill above highlights while this section's top is under the bar. Click a pill to smooth-scroll here. Above the first section nothing is highlighted; at the very bottom of the page the last pill wins.
Scroll the page — the pill above highlights while this section's top is under the bar. Click a pill to smooth-scroll here. Above the first section nothing is highlighted; at the very bottom of the page the last pill wins.
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| sections | Array | — | Ordered sections as { id, label }. Required; each id must exist as an element id on the page. |
| offset | Number | 96 | Spy line in px from the viewport top — a section is active once its top crosses it. The default suits a sticky top-2 bar over scroll-mt-20 sections. At the very bottom of the page the last section wins regardless. |
Events
| Event | Description |
|---|---|
| jump | Pill clicked, fired before the scroll starts — payload is the section id. Hook for URL state sync (e.g. qdash inventory's ?lens= param). |
| change | Scroll-spy moved the highlight — payload is the active section id, or '' when scrolled above the first section. |