{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "scrollspy-kapitelnavigation", "name": "Scrollspy-Kapitelnavigation (Sticky-Kapitelindex)", "name_en": "Scrollspy / section progress navigation / Sticky chapter index / table of contents", "kurz": "Ein Kapitelindex klebt neben dem Text, markiert das Kapitel in der Bildmitte und füllt je Kapitel eine Haarlinie, scrollgekoppelt und ohne JavaScript.", "kategorie": "Navigation", "kategorie_slug": "navigation", "kategorie_nr": 3, "bau_chat": "C3", "prioritaet": "B", "trendstatus": "aufsteigend", "belegstatus": "belegt", "website_belege": 2, "stimmung": [ "ruhig", "editorial", "präzise" ], "stimmung_roh": [ "sachlich", "editorial", "strukturiert", "ruhig" ], "technik": [ "css", "scroll-driven-css", "vanilla-js", "intersection-observer", "position-sticky", "scroll-state-queries" ], "technik_gruppen": [ "css", "js" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "1) Eine Kapitelnavigation listet die Abschnitte einer langen Seite: als Seitenspalte, als Inhaltsverzeichnis oder als Dock unten. 2) Der Eintrag des Kapitels, das gerade in der Bildmitte steht, wird hervorgehoben (Farbe, Indikator), oft mit einem Fortschrittsbalken je Kapitel. 3) Ein Klick springt weich zum Kapitel. 4) Seit 2026 geht das nativ: scroll-target-group: auto am Nav-Container und :target-current für den aktiven Link, ohne IntersectionObserver. Den Fortschritt je Kapitel liefern benannte view-timelines, ebenfalls ohne JavaScript.", "warum_es_wirkt": "Lange Seiten werden überschaubar. Man sieht jederzeit, wo man steht, wie viel noch kommt und wohin man springen kann. Die Gliederung wird selbst zum Gestaltungselement.", "wann_einsetzen": "Case Studies, Reports, Werkberichte, Dokumentation, lange Landingpages und Storytelling-Seiten mit klaren Kapiteln.", "wann_nicht": "Kurze Seiten mit zwei oder drei Abschnitten. Seiten mit waagerechtem Scroll-Hijacking ohne klare Abschnitte.", "varianten": [ "Sticky-Seitenspalte mit nummerierten Kapiteln (01 Aufgabe, 02 Konzept …) und Indikatorlinie je Eintrag", "Section Anchor Dock unten (Osmo)", "One-page Progress Navigation mit Balken (Osmo)", "Sidebar mit Scroll-Fortschrittsanzeige (Raw Materials laut Navbar Gallery)", "Waagerechte Kapitelleiste oben, auf dem Telefon mit aufklappbarer Liste", "Fortschrittsbalken je Kapitel statt einer Gesamtleiste", "Festgeklebte Kapitelüberschriften, die per scroll-state(stuck) ihre Darstellung wechseln" ], "umsetzung": "Kapitelliste als