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. |
| sticky | Boolean | auto | Join the page's sticky band. Unset: join whenever a UxStickyBand is mounted; true forces it; false opts out. Joined, it is a full-row sticky box (z-30, pointer events only on the bar) that keeps its rest height, so compacting never moves the page; jumps set scroll-margin-top to --q-sticky-top-down + 16px on the target and the spy line follows the band. |
| stickyTop | Number | 8 | Pin offset in px in a c104 band (top-2). In a c106 band the pills dock at --q-sticky-row1, under the title. |
| offset | Number | null | Spy line in px from the viewport top — a section is active once its top crosses it. Unset: just below the band while sticky, else 96 (a sticky top-2 wrapper 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. |