Sticky Inhaltsverzeichnis mit scrollbaren aktiven Zuständen

Nehmen wir an, Sie haben ein zweispaltiges Layout: eine Hauptspalte mit Inhalt und eine Seitenleiste. Angenommen, es gibt viel Inhalt, mit Abschnitten, die Scrollen erfordern. Die Seitenleiste ist weitgehend leer, so dass Sie sicher ein position: sticky; Inhaltsverzeichnis dort für all den Inhalt in der Hauptspalte platzieren können. Ein ziemlich gängiges Muster für Dokumentationen.

Bramus Van Damme hat ein schönes Tutorial zu all dem, beginnend mit semantischer Markup, die meisten Funktionalitäten mit HTML und CSS implementiert und dann den letzten Teil der aktiven Navigationserweiterung mit JavaScript erledigt.

Wenn Sie sich zum Beispiel nicht selbst zu einem Abschnitt klicken (wo Sie vielleicht mit :target Styling für aktive Navigation davonkommen könnten), ist JavaScript notwendig, um zu sagen, wo Sie sich gerade befinden und die aktive Navigation hervorzuheben. Dieser aktive Teil wird schön mit IntersectionObserver gehandhabt, was, wie die perfekte API dafür ist.

Hier ist das Ergebnis

Es erinnert mich an eine sehr ähnliche Demo von Hakim El Hattab, die er Progress Nav nannte. Das Designmuster ist genau dasselbe, aber Hakims Version hat diesen ultra-schicken SVG-Pfad, der sich unterwegs selbst zeichnet und für Unter-Navigationspunkte einrückt. Ich werde hier ein Video einbetten

Dieses verwendet kein IntersectionObserver, also wenn Sie daran basteln wollen, kombinieren Sie sie!

Kommentare

vsync

# 31. Januar 2020

Ich habe einen Codepen für so etwas gemacht (letztes Jahr), in React, mit Custom Hooks, was ähnliches wie beschrieben ermöglicht und viel mehr!
sehr flexibel, solide & performant

Zuerst schien es auch, dass IntersectionObserver gut passen würde, aber sehr schnell sah ich, dass es für das, was ich im Sinn hatte, nicht gut performte oder zuverlässig war. Jetzt ist es perfekt.

perija

Permalink zum Kommentar# 5. März 2020

Hallo vsync, gute Arbeit. Ich frage mich, haben Sie dieses Beispiel auf GitHub?

Chris Coyier

# 11. Mai 2021

Davor Suljic mit einer cleveren Lösung (ohne JavaScript!) nach Abpfiff

Es ist eine Lösung ohne JavaScript-Nutzung. Jedem <section> wurde ein Hintergrund-Patch direkt unter dem entsprechenden Link in der Seitenleisten-Navigation gegeben. Zum Beispiel

section:nth-of-type(1) {
  background: right 2rem top 2rem / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
``background-attachment: fixed;
}

background-attachment: fixed; lässt den Patch den Link (mit transparentem Hintergrund) markieren, solange der Abschnitt sichtbar ist. Es erzeugt eine visuelle Anzeige des sich aktualisierenden aktiven Zustands der Navigation.

Es gibt etwas manuelle Arbeit, um alle Abschnittshintergründe an die richtige Stelle zu setzen, aber ich denke, es lohnt sich.

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.