Scrollspy 1.2.0

Das <velin-scrollspy> Web Component nutzt IntersectionObserver to automatically highlight the active navigation link as sections scroll into view. English: Scrollspy

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Foundation wo vermerkt.

Wann verwenden

Hebe den Nav-Eintrag hervor, der zum aktuell sichtbaren Abschnitt passt.
Lange Seiten mit On-Page-Outline, bei denen href Anker auf Abschnitts-IDs zeigen.

Wann nicht

Multi-page result navigation — use Pagination.
A floating “back to top” control — use Nach oben scrollen.

Grundlegende Nutzung

Umschließe Navigation und scrollbaren Inhalt. Die Komponente ordnet href Anker Abschnitts-IDs zu.

<velin-scrollspy>
  <nav slot="nav">
    <a href="#section-1">Section 1</a>
    <a href="#section-2">Section 2</a>
    <a href="#section-3">Section 3</a>
  </nav>

  <div slot="content">
    <section id="section-1">
      <h2>Section 1</h2>
      <p>Content for section one…</p>
    </section>
    <section id="section-2">
      <h2>Section 2</h2>
      <p>Content for section two…</p>
    </section>
    <section id="section-3">
      <h2>Section 3</h2>
      <p>Content for section three…</p>
    </section>
  </div>
</velin-scrollspy>

IntersectionObserver

Intern erzeugt die Komponente einen IntersectionObserver mit konfigurierbarem root-margin and threshold. When a section enters the viewport the corresponding nav link receives .active.

<velin-scrollspy root-margin="0px 0px -40% 0px" threshold="0">
  …
</velin-scrollspy>

Nav-Hervorhebung

Der aktive Link erhält automatisch .active. Style ihn nach Bedarf — es funktioniert mit jedem Nav-Pattern (List Groups, Tabs, vertikale Sidebars).

velin-scrollspy nav a.active {
  color: var(--velin-primary);
  font-weight: 600;
  border-inline-start: 3px solid var(--velin-primary);
}

Behalte echte In-Page-Links (href="#…"), damit die Outline auch ohne JavaScript funktioniert.
Stelle sicher, dass Abschnittsüberschriften stabile IDs haben, die zu den Nav-Ankern passen.