Title: FlowCraft Scroll-Spy Contents

Help visitors find their way through long pages. A sticky table of contents highlights the section they're reading and takes them to any section with one click.

The FlowCraft Scroll-Spy Contents is built with HTML, Tailwind CSS (via CDN) and vanilla JavaScript:

- The link for the section being read lights up automatically as visitors scroll

- Clicking a link scrolls smoothly and stops just below your sticky header

- Sticky sidebar on desktop; a swipeable row of step buttons on phones

- A reading progress bar shows how much of the page has been read

- Works with the keyboard and tells screen readers which section is current

- Uses the browser's efficient IntersectionObserver, with no heavy scroll tracking

- Also works inside a scrolling box, such as a docs panel or pop-up

- Style the active link with your own Tailwind classes

A built-in quote form sends each reader's email, the sections they read and how far down the page they got to your form service (Formspree, Make, Zapier or your own webhook).

WHAT'S INCLUDED

- index.html: sticky contents, five sample sections and the quote form

- app.js: all the logic, heavily commented

- style.css: link transitions, progress bar and the phone button row

- assets/images/: five sample section illustrations

- README.txt: setup guide, plus an optional .htaccess for Apache/Hostinger

REQUIREMENTS

- No npm install or build step. It also runs when opened straight from your computer.

- Add as many sections as you need: each one needs an id and a matching link.

Try the live demo: https://haveinsights.com/flowcraft/scroll-spy/

License: use and modify in unlimited personal and client projects. Resale or redistribution is not permitted.