Build a CSS-Only Scrollspy Nav

Build a CSS-only nav that highlights the section currently in view.

Introduction

30 Second Summary

On a long article, it only takes one quick scroll to lose track of where you are. Readers need a clear cue that follows them through the page.

In this project, you will build a long article page with a sticky side navigation that highlights the current section as you scroll. Modern CSS selectors control the link states while anchor positioning moves the indicator without JavaScript.

What You'll Build

As you scroll the article, a side-nav indicator glides from link to link to keep your place visible.

By the end of this project, you'll have:

  • A clickable sticky navigation that jumps directly to any article section.
  • A scroll-aware indicator that glides to the current link. Distinct colours separate passed sections from upcoming sections.
  • A graceful browser fallback that keeps every anchor link working in Firefox and Safari.
  • Secret Mission: An optional challenge to push your CSS skills further.

Are there any prerequisites?

Basic HTML and CSS are enough for this project. A Chromium browser shows the scroll highlighting and moving indicator.

Firefox and Safari provide the plain-anchor fallback check.

Before We Start

This project uses new CSS features to track the reader's position without JavaScript. Those features currently need a modern Chromium-based browser.

Google Chrome gives you a supported place to preview the page. CodePen gives you the editor for this walkthrough.

In this step, get ready to:
  • Confirm Google Chrome is available.
  • Open a blank CodePen editor for the project.
Choose a supported browser

A current Chromium browser is the preview environment for this project. This keeps browser support from hiding the CSS effects you build.

✔️ Google Chrome is installed

You're ready. Chrome can display the CSS effects used in this project.

  • Press Cmd+Space on macOS or the Windows key on Windows to open system search.
  • Type Google Chrome into the search bar.
  • Press Enter to open it.

ⓧ Google Chrome isn't installed

Installing Chrome gives you a Chromium browser that can show the new CSS features.

macOS

The macOS installer uses a drag-to-install window. This can feel unusual the first time.

  • Open googlechrome.dmg from your Downloads folder.
  • Drag Chrome into the Applications folder.
  • Press Cmd+Space to open Spotlight.
  • Type Google Chrome into Spotlight.
  • Press Enter to open it.

You made it through the installer. Chrome is now available from your Applications folder.

Windows

  • Open the downloaded installation file from your Downloads folder.
  • Select Run if Windows asks for confirmation.
  • Select Yes if Windows asks for permission to make changes.

When installation finishes, you'll see a Chrome window. Your supported browser is ready.

Chrome Won't Open

  • Confirm the installation finished before searching for Chrome.
  • Check the Applications folder for Chrome on macOS.

Help me get Google Chrome installed and open.

Open your CodePen workspace

A Pen gives your HTML its own editing area. It also gives your CSS a separate editing area beside the live preview.

  • Open a blank Pen in Chrome by visiting pen.new.

Before you check, which parts of the workspace do you expect to be visible?

  • Inspect the new Pen editor in Chrome.

You should see editing areas for HTML and CSS. You should also see a live preview.

  • Keep the CodePen tab open for the next step.

That's your workspace ready. The live preview can show each change as you build.

CodePen Editor Not Showing

  • Reload the CodePen page in Chrome.
  • Confirm that pen.new appears in Chrome's address bar.

Help me open the CodePen editor in Google Chrome.

Your supported browser is ready. Next, you'll build the article structure that the navigation links jump to.

Build the Article and Navigation

A scroll-aware navigation depends on a precise connection between every link and its destination. A broken fragment leaves later styling with nothing reliable to follow.

In this step, you'll build the HTML article structure. Basic CSS will keep its navigation visible while the reader moves between sections.

In this step, get ready to:
  • Create navigation links for four article sections.
  • Build matching sections with unique IDs.
  • Keep the navigation visible while the article scrolls.
Create matching links and sections

An anchor link uses a fragment such as #foundations to target an element with the matching id="foundations". This pairing gives the browser a built-in jump destination.

  • Create article-demo.html inside the workspace already open in your editor.
  • Use the HTML panel as article-demo.html if you are working in CodePen.
  • Add the page structure by pasting this code:
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reading Guide</title>
</head>
<body>
  <!-- Each navigation fragment matches one article section ID. -->
  <div class="page-shell">
    <nav class="toc" aria-label="Article sections">
      <p>On this page</p>
      <ol>
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#foundations">Foundations</a></li>
        <li><a href="#patterns">Patterns</a></li>
        <li><a href="#delivery">Delivery</a></li>
      </ol>
    </nav>
    <main>
      <!-- Long sections create room to see each jump clearly. -->
      <section id="introduction"><h1>Introduction</h1><p>A clear reading guide helps people understand where they are in a long article before they decide where to go next.</p><p>This opening section introduces the page and gives the first navigation link a destination.</p></section>
      <section id="foundations"><h2>Foundations</h2><p>Strong page structure begins with meaningful landmarks and predictable links that work without extra scripting.</p><p>Matching fragments and section IDs create the relationship that every later visual state will use.</p></section>
      <section id="patterns"><h2>Patterns</h2><p>Reusable navigation patterns help readers move through documentation, tutorials, and other long-form pages.</p><p>A persistent table of contents keeps those destinations close while the article continues below it.</p></section>
      <section id="delivery"><h2>Delivery</h2><p>A useful reading experience keeps its core navigation available even when newer browser features are unavailable.</p><p>These ordinary anchor links provide that dependable foundation for the finished page.</p></section>
    </main>
  </div>
</body>
</html>

What does the structure establish?

  • Each href fragment names the section that its link should reveal.
  • Each section id creates a unique destination for one link.
  • The nav element groups the table of contents into one page landmark.
  • The aria-label value describes the navigation's purpose for assistive technology.
  • Save article-demo.html.
  • Load article-demo.html using the preview from earlier.

You'll see a navigation list followed by four article sections. The links already have matching destinations in the page.

Don't see the article structure?

  • Confirm that the entire snippet sits inside article-demo.html or the CodePen HTML panel.
  • Compare every href fragment with its corresponding section id value.
  • Check that every opening HTML tag has the closing tag shown in the snippet.

Help me find the mismatch in my article navigation markup.

Keep the navigation visible

A sticky element stays attached to a chosen position while its surrounding content scrolls. The article layout gives the navigation a stable column for that behavior.

  • Find the closing </head> tag in article-demo.html.
  • Place this style block directly above that tag:
<style>
  /* Keep the article readable while the navigation stays in view. */
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    color: #1f2937;
    background: #f8fafc;
  }
  .page-shell {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    gap: 3rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 2rem;
  }
  .toc {
    position: sticky;
    top: 2rem;
    align-self: start;
  }
  .toc ol { display: grid; gap: 0.75rem; padding-left: 1.25rem; }
  .toc a { color: #64748b; text-decoration: none; }
  main { min-width: 0; }
  section { min-height: 90vh; padding-block: 1rem 5rem; }
</style>

What does this styling do?

  • The grid gives the navigation its own column beside the article.
  • The sticky position keeps the table of contents near the top of the viewport.
  • The section height creates enough distance to make every navigation jump visible.
  • Smooth scrolling makes the movement between destinations easier to follow.
  • Save article-demo.html.
  • Refresh the browser preview.
  • Scroll into the Patterns section.

You'll see the article in a wide right column. The navigation stays near the top-left while the sections move past it.

Does the navigation scroll away?

  • Confirm that .page-shell wraps both .toc and main.
  • Check that .toc still contains position: sticky.
  • Check that every section still contains min-height: 90vh.

Help me diagnose why my sticky article navigation scrolls out of view.

✔️ Awesome, I've got everything!

Great. Double check that you've saved article-demo.html with the navigation beside all four sections.

ⓧ I'd like to double check the full code

Compare your file with the complete article-demo.html at this point.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reading Guide</title>
  <style>
    /* Keep the article readable while the navigation stays in view. */
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      color: #1f2937;
      background: #f8fafc;
    }
    .page-shell {
      display: grid;
      grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
      gap: 3rem;
      max-width: 72rem;
      margin: 0 auto;
      padding: 2rem;
    }
    .toc {
      position: sticky;
      top: 2rem;
      align-self: start;
    }
    .toc ol { display: grid; gap: 0.75rem; padding-left: 1.25rem; }
    .toc a { color: #64748b; text-decoration: none; }
    main { min-width: 0; }
    section { min-height: 90vh; padding-block: 1rem 5rem; }
  </style>
</head>
<body>
  <!-- Each navigation fragment matches one article section ID. -->
  <div class="page-shell">
    <nav class="toc" aria-label="Article sections">
      <p>On this page</p>
      <ol>
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#foundations">Foundations</a></li>
        <li><a href="#patterns">Patterns</a></li>
        <li><a href="#delivery">Delivery</a></li>
      </ol>
    </nav>
    <main>
      <!-- Long sections create room to see each jump clearly. -->
      <section id="introduction"><h1>Introduction</h1><p>A clear reading guide helps people understand where they are in a long article before they decide where to go next.</p><p>This opening section introduces the page and gives the first navigation link a destination.</p></section>
      <section id="foundations"><h2>Foundations</h2><p>Strong page structure begins with meaningful landmarks and predictable links that work without extra scripting.</p><p>Matching fragments and section IDs create the relationship that every later visual state will use.</p></section>
      <section id="patterns"><h2>Patterns</h2><p>Reusable navigation patterns help readers move through documentation, tutorials, and other long-form pages.</p><p>A persistent table of contents keeps those destinations close while the article continues below it.</p></section>
      <section id="delivery"><h2>Delivery</h2><p>A useful reading experience keeps its core navigation available even when newer browser features are unavailable.</p><p>These ordinary anchor links provide that dependable foundation for the finished page.</p></section>
    </main>
  </div>
</body>
</html>
Test every section jump

Before you test the links, which heading do you expect the browser to place near the top after each click?

  • Click Introduction in the sticky navigation.
  • Click Foundations in the sticky navigation.
  • Click Patterns in the sticky navigation.
  • Click Delivery in the sticky navigation.

Each click moves its matching heading into view. The browser address ends with the corresponding fragment such as #delivery.

You've got the page's navigation contract working. Every link now reaches the section that later visual states can track.

Your article now has dependable anchor navigation with a sticky table of contents. Next, you'll teach CSS to identify the section currently in view.

Highlight the Current Link

Your navigation now jumps to every matching article section. Each link still has the same visual weight, so readers can lose track of their position.

Now you'll use CSS to connect the reading position to one current link. The browser updates that link as the reader scrolls.

In this step, get ready to:
  • Turn the navigation links into a scroll target group.
  • Style the current link with :target-current.
  • Verify that the highlight follows the article while scrolling.
Group the navigation links

The scroll-target-group property tells the browser that the navigation anchors form one tracked group. The browser can then identify the link whose section is currently relevant.

  • Return to the existing CSS for article-demo.html in your editor or CodePen.
  • Go to the end of the page's existing CSS.
  • Add the target group plus its current-link style by copying this code:
nav {
  /* Treat the navigation links as one scroll target group */
  scroll-target-group: auto;
}

nav a:target-current {
  /* Highlight the link for the section currently in view */
  color: #7c3aed;
}

What does this CSS do?

  • The scroll-target-group: auto declaration lets the browser track one current target across the navigation links.
  • The nav a:target-current selector matches the anchor connected to the section that is currently relevant.
  • The color declaration turns that current link purple.
  • Save article-demo.html.
  • Refresh the article preview.

You should see one navigation link turn purple. That link identifies the section currently in view.

No link is highlighted?

  • Confirm that the preview is running in the modern Chromium-based browser from earlier.
  • Check that both new rules sit inside the page's CSS.
  • Check that each navigation link still points to the matching section ID.

Help me find why my current navigation link is not changing colour.

Prove the highlight follows the article

The current link comes from the reader's position in the article. Scrolling into another section should move the purple colour to its matching navigation link.

Before you scroll, which navigation link do you expect to turn purple when the next section becomes current?

  • Scroll down until the next section heading reaches the main reading area.
  • Watch the sticky side navigation as the page settles.

You'll see the previous link return to its normal colour. The link for the new section turns purple.

That's the core behavior working. Your navigation now follows the reader without a scroll listener.

✔️ Awesome, I've got everything!

Great work. Save article-demo.html after confirming that the purple highlight moves between links as you scroll.

ⓧ I'd like to double check the full code

Your existing article structure stays unchanged. Compare the completed CSS addition with this reference:

nav {
  /* Treat the navigation links as one scroll target group */
  scroll-target-group: auto;
}

nav a:target-current {
  /* Highlight the link for the section currently in view */
  color: #7c3aed;
}

What should this add to your page?

The navigation becomes a scroll target group. Its currently relevant anchor receives the purple colour through :target-current.

Your navigation now tracks the current section with CSS alone. Next, you'll distinguish links the reader has passed from links still ahead.

Style Links Before and After

Your table of contents already changes the active link as the reader scrolls. That active colour pinpoints the current section.

The remaining gap is progress context. In this step, you'll use CSS states to distinguish sections already passed from sections still ahead.

In this step, get ready to:
  • Add circular markers to every table-of-contents link.
  • Give each scroll state a distinct treatment.
  • Confirm the markers update as you move through the article.
Create a marker for every link

A ::before pseudo-element gives each link its own visual marker. The link layout keeps that marker aligned with its text.

  • Find the rule containing scroll-target-group: auto in article-demo.html.
  • Paste the following link rules directly below it:
.toc a {
  /* Keep each marker aligned with its link text */
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.toc a::before {
  /* Create the circle that represents each article section */
  content: " ";
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-accent);
}

What does this CSS do?

  • The .toc a rule uses a flexible row to align each link with its marker.
  • The .toc a::before rule generates one circle before every link.
  • The fixed width prevents a marker from shrinking beside longer link text.
  • Save article-demo.html.
  • Refresh the page in your Chromium-based browser.

Good progress. You'll see a circular accent marker beside every table-of-contents link.

Don't see the markers?

  • Confirm that .toc matches the class on the element wrapping your navigation links.
  • Check that the content: " "; declaration remains inside the ::before rule.

Ask for help checking the marker selector:

Style each scroll state

The browser sorts navigation links into three states around the current section. Separate marker styles turn those states into a visible reading path.

  • Find the closing brace of the .toc a::before rule in article-demo.html.
  • Paste the following state rules below that brace:
.toc a:target-before::before {
  /* Keep completed sections in the accent colour */
  background-color: var(--color-accent);
}

.toc a:target-current::before {
  /* Add a glow to the section currently in view */
  box-shadow: 0 0 20px var(--color-accent);
}

.toc a:target-after::before {
  /* Make upcoming sections smaller and quieter */
  background-color: var(--color-border);
  transform: scale(0.6);
}

How do the states work?

  • The :target-before state matches links whose sections come before the current section.
  • The :target-current state adds a glow around the marker for the section in view.
  • The :target-after state shrinks upcoming markers to show the remaining path.
  • Save article-demo.html.
  • Refresh the page in your Chromium-based browser.
  • Scroll beyond the first article section.

That's the progress layer working. You'll see accent markers above the current link while smaller muted markers remain below it.

Do all markers still look the same?

  • Confirm that the navigation ancestor still contains scroll-target-group: auto.
  • Check that every state selector ends with ::before.
  • Test the page in a modern Chromium-based browser that supports the target states.

Ask for help comparing the three state selectors:

Verify the reading progress

Together, the three states turn the navigation into a map of the reader's position. Each marker should change treatment when its section crosses the current point.

Before you test the whole page, which markers do you expect to become smaller as you scroll down?

  • Scroll to the top of the article.
  • Watch the navigation while scrolling to the middle of the article.
  • Continue scrolling to the final article section.

You'll see the active link change colour as before. Markers for passed sections keep the accent colour while markers for upcoming sections stay smaller and muted.

✔️ Awesome, I've got everything!

Your navigation now distinguishes passed sections from the current section and the sections still ahead.

ⓧ I'd like to double check the full code

Compare the marker CSS in article-demo.html with this completed version:

.toc a {
  /* Keep each marker aligned with its link text */
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.toc a::before {
  /* Create the circle that represents each article section */
  content: " ";
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.toc a:target-before::before {
  /* Keep completed sections in the accent colour */
  background-color: var(--color-accent);
}

.toc a:target-current::before {
  /* Add a glow to the section currently in view */
  box-shadow: 0 0 20px var(--color-accent);
}

.toc a:target-after::before {
  /* Make upcoming sections smaller and quieter */
  background-color: var(--color-border);
  transform: scale(0.6);
}

Your table of contents now shows reading progress with CSS alone. Next, you'll add an indicator line that follows the active item.

Add the Sliding Indicator

Your navigation now separates passed sections from the current section. It also shows which sections are still ahead.

A continuous line can make that progress easier to scan. CSS Anchor Positioning lets the line use the current link as a moving reference.

In this step, get ready to:
  • Give the current navigation link a named anchor.
  • Position an indicator line against that anchor.
  • Confirm the line slides between active links.
Connect the indicator to the current link

A named anchor gives the active link a reference that CSS can follow. The list's pseudo-element uses that reference to place its lower edge beside the current link.

  • Add the anchor relationship plus the indicator line after the existing navigation state rules in article-demo.html by pasting this code:
.toc ol {
  /* Give the list a positioning context for its line */
  position: relative;
}

.toc a:target-current {
  /* Move this name to whichever link is current */
  anchor-name: --current-marker;
}

.toc ol::before {
  /* Draw one line whose lower edge follows the current link */
  content: " ";
  width: 2px;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  background-color: currentColor;
  position-anchor: --current-marker;
  bottom: anchor(center);
  transition: bottom 300ms ease;
}

How does the line follow the link?

  • The position: relative declaration gives the line a positioning context inside the table of contents.
  • The anchor-name declaration applies only to the link matching :target-current. The name moves whenever the current link changes.
  • The position-anchor declaration associates the line with --current-marker.
  • The bottom: anchor(center) declaration aligns the line's lower edge with the vertical centre of the current link.
  • The transition declaration animates the changing lower edge.
  • Save article-demo.html.
  • Refresh the article in your Chromium-based browser.

You should see a slim vertical line running from the top of the navigation list to the current link.

  • Scroll slowly into the next article section.

The line's lower edge should slide to the newly active link. The existing passed and upcoming markers should remain unchanged.

Indicator missing or stuck?

  • Check that content: " " remains inside the .toc ol::before rule.
  • Check that both anchor declarations use the exact name --current-marker.
  • Check that the line has position: absolute before using position-anchor.
  • Confirm the page is running in the Chromium-based browser from earlier.

Why is my CSS indicator missing or staying on one navigation link?

Verify the line follows each section

Before you scroll, where do you expect the line's lower edge to move? The next check reveals it.

  • Scroll from the current article section into the next section.

You should see the next link change to its current colour. The indicator should finish its movement beside that same link.

  • Click a navigation link several sections away from the current one.

The page should jump to the selected section. The indicator should slide directly to its matching link.

✔️ Awesome, I've got everything!

Your current link now acts as a moving anchor. The indicator follows it across scrolling and direct navigation.

ⓧ I'd like to double check the full code

Your complete sliding-indicator CSS inside article-demo.html should match this:

.toc ol {
  /* Give the list a positioning context for its line */
  position: relative;
}

.toc a:target-current {
  /* Move this name to whichever link is current */
  anchor-name: --current-marker;
}

.toc ol::before {
  /* Draw one line whose lower edge follows the current link */
  content: " ";
  width: 2px;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  background-color: currentColor;
  position-anchor: --current-marker;
  bottom: anchor(center);
  transition: bottom 300ms ease;
}

That moving line now tracks the active section without JavaScript. Next, you'll confirm the anchor links still work when the newer CSS is unavailable.

Test the Fallback Navigation

Your CSS-only scrollspy already highlights the current section in Chromium. Its indicator follows the active navigation link as you scroll.

The final risk sits outside that supporting browser. Progressive enhancement should preserve the article's anchor links when newer CSS features are unavailable.

In this step, get ready to:
  • Load the same article in Firefox or Safari.
  • Follow navigation links to their matching article sections.
  • Confirm the plain-anchor fallback without the enhanced state styles.
Open the article in a fallback browser

Firefox or Safari provides the unsupported-browser test. You will load the same page without changing article-demo.html.

✔️ Firefox or Safari is available

  • Return to the Chromium browser from earlier.
  • Copy the current article URL from the address bar.
  • Press Cmd+Space on macOS or the Windows key on Windows.
  • Type Safari on macOS or Firefox on Windows to open the fallback browser.
  • Paste the copied URL into the address bar.
  • Press Enter to load the article.

ⓧ I need a fallback browser

Firefox gives you the second browser this test requires.

  • Return to the Chromium browser from earlier.
  • Copy the current article URL from the address bar.
  • Open Mozilla's official Firefox download page.
  • Download the Firefox installer for your operating system.
  • Start the downloaded installer.

Your computer may request permission before it installs the browser.

  • Approve the installation request if it appears.
  • Wait for the Firefox installation to finish.

That hurdle is cleared. Firefox is now available for the fallback test.

  • Press Cmd+Space on macOS or the Windows key on Windows.
  • Type Firefox to open the browser.
  • Paste the copied article URL into the address bar.
  • Press Enter to load the article.

Firefox did not install?

Run the downloaded installer again with permission to make changes on your computer.

If the installation still stops, help me troubleshoot the Firefox installation.

You'll see the same article with its sticky side navigation. The current-link colour is absent.

The past and ahead markers are absent. The indicator line is absent.

What is progressive enhancement?

Progressive enhancement starts with baseline HTML that works across browsers. Each navigation link already points to a matching article section.

Supporting browsers add the active state and moving indicator. Unsupported browsers keep the baseline links.

Test the plain anchor links

Each navigation link contains a fragment that matches one section identifier. The browser can follow that relationship without the newer CSS features.

Before you select a link, consider where you expect the article to move without the enhanced styles.

  • Select a navigation link for a section farther down the article.

You'll move to the matching section. The URL now ends with that section's fragment.

  • Select a navigation link for a section near the top of the article.

You'll move back to that matching section. The navigation works without the current-link colour or moving indicator.

What does this prove?

The anchor links provide the page's essential navigation. The newer CSS adds a visual reading position in supporting browsers.

That confirms your fallback is doing its job. Readers can still move through the article when the enhancement styles are unavailable.

Links not moving the article?

  • Confirm the fallback browser has the same article URL as Chromium.
  • Check that each navigation link's fragment matches a unique section identifier in article-demo.html.
  • Save article-demo.html before loading the page again if you use a local file.

If the page still stays in place, help me diagnose the anchor navigation.

Secret mission

Run a Cross-Browser QA Pass

Prove that the active navigation states work in Chromium. Then capture the plain-anchor fallback in Firefox or Safari as evidence that the page remains usable without the optional enhancement.

Clean Up Your Resources

Clean Up Your Resources

Your CSS scrollspy runs as a static file with no ongoing service costs. Decide whether to keep the file, pause your work, or delete it entirely.

Resources you used:

  • Your article-demo.html file containing the finished static page.

Keep everything running

No action is needed. Choose this option if you want to keep the finished scrollspy ready for another demonstration.

  • Keep article-demo.html in its current project location.
  • Open the page whenever you want to compare the enhanced highlighting with the plain-anchor fallback.

Pause - I'll come back to this later

Pausing closes your working session while preserving the static file. No background process keeps running.

  • Save article-demo.html in the project editor from earlier.
  • Close the page preview.
  • Close the project editor when you finish.

Delete - I don't want to use this again

Deleting the file removes your finished scrollspy from its project location. Your testing tools stay installed.

  • Return to the project editor from earlier.
  • Locate article-demo.html in the file sidebar.
  • Delete article-demo.html using the file's context menu.
  • Open Trash on macOS or Recycle Bin on Windows if the deleted file is still recoverable.
  • Permanently remove article-demo.html from that location.
  • Confirm article-demo.html no longer appears in the project editor's file sidebar.

Nice Work!

Nice Work!

You did it! You built a sticky article navigation that follows the reader using pure CSS. The page also keeps its essential navigation working when those newer browser features are unavailable.

You've learned how to:

  • Build a sticky table of contents whose anchor links jump to matching sections on a long article page.
  • Use scroll-target-group: auto to connect the navigation with section targets. Style the active link with :target-current. Distinguish passed links with :target-before. Mark upcoming links with :target-after.
  • Move an indicator line with anchor positioning in supporting browsers. Preserve plain anchor navigation in Firefox or Safari through progressive enhancement.
  • Secret Mission: Completed an optional challenge to push your CSS skills further.

Ready to quiz yourself?