Scroll Progress Ruler Track Features Block for React

Edit the six stop objects at the top of the file: each has a number, a name for the ruler, a heading, a sentence, a figure with its label and an anchor id. The ruler's items are built from the same list, and each section's heading carries that id, so a link and its section can't come apart. A drawing is a small component beside them; pass your own as the section's child.

The Toc component watches the headings with an intersection observer, in a band a little below the top of the screen (its rootMargin). The tick of the heading in that band is marked active, and the thumb is placed from the active link's position, so it follows the section even when the window is resized. With reduced motion the thumb jumps instead of sliding.

Yes. The ruler is sticky at the top of the screen; if your page has a fixed navigation bar, change top-0 on the ruler to the bar's height, and raise the scroll-mt-24 on each heading by the same amount so a jump doesn't hide the title behind the ruler.

The ticks are plain links in a navigation landmark named "Stops": Tab moves along them, and Enter jumps to the section. There's no custom key handling, so it behaves like any table of contents.

The ruler shrinks to six dots (each link keeps its name for screen readers), the drawings are left out and the sections stack, so the six sections fit in about three screens. Nothing scrolls the page sideways at 320 pixels.

Yes: following a tick adds the section's id to the address (a hash), as clicking a table of contents does elsewhere, so a section can be shared and the back button returns to where you were.