Wenn Sie ein Inhaltsverzeichnis auf einer Seite mit langer Scrolltiefe haben, dank z. B. position: fixed; oder position: sticky;, ist die IntersectionObserver API in JavaScript der perfekte Begleiter, um Elemente im Inhaltsverzeichnis hervorzuheben, wenn der entsprechende Inhalt sichtbar ist.
Ben Frain hat einen Beitrag dazu
Dank IntersectionObserver haben wir ein kleines, aber sehr effizientes Code-Fragment, um unser Inhaltsverzeichnis zu erstellen, schnelle Links zum Springen im Dokument bereitzustellen und den Lesern anzuzeigen, wo sie sich gerade im Dokument befinden.
Im Vergleich zu älteren Techniken, die an Scroll-Events gebunden werden und eigene Berechnungen durchführen müssen, ist dieser Code kürzer, schneller und logischer. Wenn Sie nach der Demo auf Bens Website suchen, ist der Artikel die Demo. Und hier ist ein Video dazu
Ich habe das Zeug schon früher erwähnt, aber hier ist eine Version von Bramus Van Damme
Und hier ist eine Version von Hakim el Hattab, die geradezu darum bettelt, dass jemand sie auf IntersectionObserver portiert, weil die UI so cool ist
Das ist schick! Ich habe vor ein paar Monaten etwas Ähnliches geschrieben. Toller Beitrag!
Das ist so gut
Ich bin ziemlich neu in der Intersection Observer API, aber die Portierung von Hakims Navbar-Konzept war eine schöne Herausforderung, um ein Gefühl dafür zu bekommen, wie es funktioniert. Scheint ziemlich gut zu funktionieren: https://codepen.io/agrimsrud/pen/XWNLMeW
Allerdings wurden nicht allzu viele Codezeilen gespart, daher bin ich sicher, dass jemand eine noch effizientere Version finden kann…
Ich kann verstehen, warum Sie eine tiefere Ebene in einem Inhaltsverzeichnis wünschen würden, da Sie alles einbeziehen möchten, aber das Problem ist, wenn Sie h1, h2, h3, h4 verwenden, wird es ein zu langes Verzeichnis, das zu lange zum Lesen dauert, und es sollte vielleicht eher ein PDF sein – oder der Blogbeitrag sollte in Sammlungen von Blogbeiträgen unterteilt werden, so dass er Kapiteln in einem Buch ähnelt.
Außerdem wird das Verzeichnis auf kleineren Bildschirmen überlaufen, wenn es zu lang wird. Denken Sie daran, dass ein Blogbeitrag kein Buch ist. Er ist dazu gedacht, schnell gelesen zu werden. Ein vollständiges Inhaltsverzeichnis mit Unterebenen Hx’s sollte wirklich nicht nötig sein, und daher ist es einfacher, eine Übersicht zu erstellen, indem man nur H2’s verwendet, anstatt eines Inhaltsverzeichnisses.
Ich würde sagen, wenn Sie den wichtigsten Inhalt eines H2 nicht in dieser H2-Überschrift zusammenfassen können, ohne auch H3 und/oder H4 einzubeziehen, dann machen Sie es vielleicht falsch. Vielleicht ist Ihre H2-Überschrift zu unpräzise.
Ich möchte ein Argument mit POC sehen, das dafür spricht, tiefer als H2 in das Inhaltsverzeichnis zu gehen.
Hallo, kann mir jemand sagen, wie man dasselbe mit next.js implementieren kann?