Source Code

<nav class="stn-nav">
  <div class="stn-brand">Amber&nbsp;Docs</div>
  <ul class="stn-links">
    <li>Overview</li><li>Setup</li><li>API</li><li>Examples</li><li>FAQ</li>
  </ul>
  <div class="stn-track"><div class="stn-fill"></div></div>
</nav>
<main class="stn-page">
  <section class="stn-block"><h1>Overview</h1><p>This nav bar tracks total page scroll progress with an underline fill driven purely by CSS scroll-driven animations — no scroll listeners computing percentages on the main thread.</p></section>
  <section class="stn-block"><h2>Setup</h2><p>Drop the nav in as a sticky header. The thin track beneath the links fills left-to-right as the visitor scrolls down the page, giving a persistent sense of position without a separate progress bar.</p></section>
  <section class="stn-block"><h2>API</h2><p>Under the hood it's the same <code>animation-timeline: scroll()</code> primitive as a full-width reading bar, just styled as a slim underline anchored to the nav instead of the very top of the viewport.</p></section>
  <section class="stn-block"><h2>Examples</h2><p>Try resizing the window, then scroll again — the fill still tracks correctly because the browser recalculates the scroll range natively, with no JS to keep in sync.</p></section>
  <section class="stn-block"><h2>FAQ</h2><p>You've reached the end of the page — the underline fill should now read as fully complete across the whole nav width.</p></section>
</main>

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Scroll Timeline Nav Progress Indicator — Native CSS, No JS

Scroll Timeline Nav Progress Indicator · Scroll · Plain HTML, CSS & JS · Live preview

TagsGlassmorphismScroll AnimationCSS AnimationLoading States

What's included

Features

CSS-only fill
The underline needs zero JavaScript to animate.
Sticky nav integration
Progress lives directly beneath the links, not a separate bar.
Native scroll(root) timeline
Maps document scroll fraction straight to scaleX.
Graceful fallback
@supports keeps unsupported browsers from showing a stuck bar.
Separate active-link logic
A small scroll listener highlights the nearest section only.
Backdrop blur nav
A frosted sticky header that stays legible over content.
Amber gradient track
A warm two-stop gradient, easy to retheme.
Composable
Drops above any scroll-heavy page layout.

About this UI Snippet

Scroll Timeline Nav Progress — A CSS-Only Underline That Tracks Page Scroll

Screenshot of the Scroll Timeline Nav Progress Indicator snippet rendered live

Sticky navigation bars often pair with some form of scroll indicator — a progress bar, an active-link highlight, or both. This snippet builds the progress half with a single native CSS feature: a thin underline beneath the nav that fills left-to-right in lockstep with total page scroll, using animation-timeline: scroll() instead of a scroll event handler doing percentage math on every frame.

A fill bound to the nav, not the viewport

Unlike a full-width top-of-page bar (see CSS Scroll-Driven Progress Bar), this indicator lives inside the nav itself as a 3px .stn-track/.stn-fill pair pinned to the bottom edge. The fill still uses the exact same mechanism — a keyframe animation scaling from scaleX(0) to scaleX(1), retimed by animation-timeline: scroll(root) so its progress equals the document's scroll fraction. Placing it inside a position: sticky nav means it always reads as attached to the navigation, not as a separate UI element competing for attention.

Why it belongs next to a nav

Putting the progress signal directly under the links people are already looking at (rather than a bar at the very top edge of the screen, easy to miss) makes it a more natural companion to navigation — it reads as "how far through this page am I" right where the reader's eyes already rest. It pairs well with a lightweight active-section highlight, which this snippet layers on top using a small, separate scroll listener — deliberately kept apart from the CSS-only fill so the core progress mechanism stays untouched by JavaScript.

Two techniques, cleanly separated

The demo intentionally shows both approaches side by side: the underline fill is 100% CSS and needs no JavaScript to function, while the "which link is active" highlight is a conventional scroll listener, because determining which section a heading belongs to is exactly the kind of layout-dependent logic that native scroll timelines don't yet solve on their own. This is a good habit generally — reach for scroll-driven CSS animations for continuous visual mappings like fills, rotations, or scale, and keep discrete logic (which item is "active") in JavaScript.

Pairing with other scroll effects

Combine this nav with a hero built on Parallax Hero Section below the fold, or a content grid using Scroll Reveal Grid — the nav's underline will continue to reflect total page position regardless of what scroll-triggered animations are happening further down, since it reads directly from the document scroller rather than any particular section.

Customizing it

Swap the underline for a dot that moves along a horizontal track using translateX instead of scaleX, change scroll(root) to a named timeline on an inner scroll container for app-shell layouts, or theme the gradient to match your brand.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to work out where to scope a scroll timeline by hand. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain why the underline fill is deliberately kept separate from the active-link highlighting logic — one using animation-timeline: scroll() and the other using a scroll event listener — and what problem each technique is actually good at solving. The same assistant can help you extend it, for instance turning the underline into a moving dot with translateX instead of a scaling fill, or scoping the timeline to an inner scrollable container for an app-shell layout using scroll(nearest) instead of scroll(root). It's also useful for refining the active-link detection, such as replacing the getBoundingClientRect-based check with an IntersectionObserver for more robust section detection on pages with uneven section heights. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a sticky navigation bar with a thin progress underline driven by native CSS scroll-driven animations (animation-timeline: scroll()), plus a separate JavaScript-based active-link highlight — keeping the two techniques clearly separated.

Requirements:
- A position: sticky nav bar containing a brand mark, a list of nav links, and a thin (2-4px) track element pinned to the nav's bottom edge.
- The track's fill element must use a CSS keyframe animation scaling from scaleX(0) to scaleX(1) with transform-origin at the left edge, driven by animation-timeline: scroll(root) (or an equivalent scroll-timeline bound to the document) and animation: <name> auto linear — no scroll event listener may compute this fill.
- Wrap a fallback in @supports not (animation-timeline: scroll()) so unsupported browsers show a static, clearly non-functional state instead of a broken animation.
- Separately, add a small scroll event listener in JavaScript that determines which page section is nearest the top of the viewport and highlights the corresponding nav link's color — this logic must be visibly separate from the CSS fill and must not itself drive the underline's width or scale.
- Include several long content sections below the nav so both the fill and the active-link highlight are clearly demonstrated across a full scroll.
- Make sure resizing the window doesn't require re-running any JavaScript for the underline fill to remain accurate — only the native CSS timeline should be responsible for that.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

  1. 1
    Paste the HTML, CSS, and JSA sticky nav with an underline track renders — no CDN needed.
  2. 2
    Scroll the pageThe amber-to-orange underline fills beneath the nav links.
  3. 3
    Watch the active linkA separate scroll listener highlights the nearest section's link.
  4. 4
    Resize the browserThe fill keeps tracking correctly with no JS recalculation needed.
  5. 5
    Inspect the CSSOnly .stn-fill uses animation-timeline; the highlight logic is plain JS.
  6. 6
    Restyle itSwap the underline for a dot, or change scroll(root) to a container.

Real-world uses

Common Use Cases

Documentation sites
Pair with content sections styled like Scroll Reveal Grid cards.
Marketing pages
Sit above a Parallax Hero Section for a persistent orientation cue.
Long-form landing pages
Give visitors a sense of remaining content without a separate bar.
Product tour pages
Combine with Stagger List feature callouts.
Blog post templates
A subtle nav-integrated alternative to a full-width reading bar.
Knowledge base headers
Reinforce navigation context while showing scroll depth.
Related: Dot Reveal Card
See the Dot Reveal Card for a related scroll pattern worth pairing with this one.
Related: GSAP ScrollTrigger Pinned Gallery Snap
See the GSAP ScrollTrigger Pinned Gallery Snap for a related scroll pattern worth pairing with this one.
Related: Heading Underline Fill (view-timeline)
See the Heading Underline Fill (view-timeline) for a related scroll pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Both use the same animation-timeline: scroll(root) mechanism, but this indicator is scoped to sit directly beneath a sticky nav rather than spanning the very top edge of the viewport. Visually it reads as part of the navigation rather than a separate UI element, which suits documentation and product-tour layouts where the nav is already the anchor for orientation.

Determining which section is "current" depends on comparing each section's bounding position to the viewport, which is layout-dependent logic that scroll-driven CSS animations don't express well on their own — CSS timelines are built for continuous value mappings like a fill or rotation, not discrete state like "which of these five items is active." Keeping that logic in a small scroll listener keeps each technique doing what it's best at.

Yes. Because the browser recomputes the scroll(root) timeline's range natively whenever the document's scrollable height changes, resizing the window (which reflows content and changes total page height) doesn't require any JavaScript recalculation — the native timeline stays correct automatically.

Yes — change scroll(root) to scroll(nearest), and make sure the .stn-fill element's nearest scrollable ancestor is the panel you want to track rather than the document. This is useful for app-shell layouts where the nav sits outside a scrollable content pane.

The underline fill is pure CSS and ports directly into any component's stylesheet. The active-link highlight scroll listener moves into a mount effect (useEffect, onMounted, or ngAfterViewInit) and should clean up its scroll listener on unmount to avoid leaks when the nav is unmounted during route changes.