Das Problem: Sie klicken auf einen Sprunglink wie <a href="#header-3">Springen</a>, der zu etwas wie <h3 id="header-3">Überschrift</h3> verlinkt. Das ist völlig in Ordnung, bis Sie einen Header mit position: fixed; am oberen Rand der Seite haben, der die Überschrift verdeckt, auf die Sie verlinken möchten!
Feste Header haben die unangenehme Angewohnheit, das Element zu verbergen, auf das Sie verlinken möchten.
Früher gab es alle möglichen wilden Hacks, um dieses Problem zu umgehen. Tatsächlich dachte ich beim Design von CSS-Tricks, während ich schreibe: „Scheiß drauf, ich werde einfach einen großen, großzügigen padding-top auf meine Überschriften im Artikel setzen, weil mir dieser Look sowieso nichts ausmacht.“
Aber es gibt jetzt tatsächlich eine wirklich einfache Möglichkeit, dies in CSS zu handhaben.
h3 {
scroll-margin-top: 5rem; /* whatever is a nice number that gets you past the header */
}Wir haben einen Almanac-Artikel dazu, der die Browserunterstützung enthält, die im Wesentlichen überall ist. Es wird oft im Zusammenhang mit Scroll Snapping besprochen, aber ich finde diesen Anwendungsfall noch praktischer.
Hier ist eine einfache Demo
In einer ähnlichen Richtung bringt der seltsame (aber coole) „Textfragmente“-Link, den Chrome eingeführt hat, Sie stattdessen in die Mitte der Seite, was ich nett finde.
Ich zeige, dass scroll-margin bei keinem IE oder Edge verwendet werden kann. Fehlt mir etwas? https://caniuse.com/#search=scroll-margin
Meinen Sie, dass Sie dies nie in Betracht ziehen würden, weil die Tabelle besagt, dass IE nicht unterstützt wird? Wenn ja, ist das verständlich, manche Leute haben immer noch viele IE 11-Benutzer und können das nicht ignorieren. Edge ist jedoch ein Evergreen-Browser, wurde auf Chromium umgestellt und es „funktioniert auf meiner Maschine“
Vielleicht sind die Tabellen falsch.
Die meisten Windows-Benutzer haben immer noch kein Chromium Edge. Entweder muss man die neue Version manuell herunterladen oder warten, bis sie über Windows Update kommt, und es scheint, dass sie eine schrittweise Einführung durchführen. Mein Arbeitslaptop zeigt an, dass er aktuell ist, hat aber immer noch den älteren Edge.
Da dies jedoch wahrscheinlich in den kommenden Monaten für alle eingeführt wird, ist dies ein überflüssiger Punkt, insbesondere angesichts der langen Zeit, die wir mit festen Headern, die In-Page-Links verdecken, zu kämpfen hatten. Ich bin sehr froh über diese neue CSS-Regel.
Großartiger Fund. Ich hasse die Verwendung von festen Menüs wegen dieses Problems.
Sollte das auf Mobile Safari funktionieren? Ich habe gerade die CodePen-Demo auf iOS Safari (iPhone 11 Pro) ausprobiert, und die Überschriften wurden immer noch vom festen Header verdeckt...
Unabhängig davon... ein toller Tipp... werde ich ihn auf einem Desktop-Browser ausprobieren, wenn ich die Gelegenheit dazu habe...
Funktioniert hier bei mir mit Firefox für Android.
Es scheint in Safari Mac (v13) nicht zu funktionieren (oder unterstützt zu werden) und funktioniert auch in der neuesten Edge-Version bei mir nicht (nicht dass es ein großes Problem wäre, da die Methode keinen Schaden anrichtet).
Die Methode wird für responsive (feste oder klebende) Header, bei denen Text umbricht oder sich der Inhalt je nach Bildschirmbreite (oder Textzoom) anpasst, nicht sehr nützlich sein, daher müssen die Anwendungsfälle richtig verwaltet werden.
Es ist jedoch eine nützliche Methode für kleine feste Header mit geringer Höhe, danke für den Tipp :)
Ich kann das auch nicht zum Laufen bringen. Ich benutze mobile Safari auf (derzeit neuester) iOS 13.3.1.
Nein, tut es nicht, obwohl CanIUse sagt, dass es geht. Ich habe viel damit herumgespielt, aber schließlich einen Bug bei browser-compat-data gemeldet: https://github.com/mdn/browser-compat-data/issues/4945 (weitere Infos dort)
Es ist eine großartige Funktion, aber solange Safari es nicht behebt, können Sie es immer noch nicht verwenden, wenn Sie Safari unterstützen müssen, und benötigen wahrscheinlich einige Hacks wie einen negativen Top-Offset auf ::before
Lob an Miriam, ich erinnere mich, dass sie neulich darüber getwittert hat und Sie erstaunt waren, dass es das gibt. Ich auch.
Ooh, das ist nett. Um also etwas Ähnliches wie Chromes Textfragment-Links zu erreichen, können Sie
scroll-margin-top: 50vhsetzen? Ich weiß nicht, ob Sie das jemals wirklich wollen würden, aber es ist gut zu wissen!Sollte das in Edge und IE11 funktionieren? caniuse.com sagt „nein“. Gibt es einen Polyfill oder Workaround?
@Chris danke fürs Teilen – das ist
Bezüglich des *Textfragments*: Haben Sie Informationen darüber, wie dies implementiert werden kann, ohne die Anker-Navigation in älteren (fast allen) Browsern zu beeinträchtigen?
*Die Specs 4.3* beschreiben ein Fallback, wenn das Dokument geändert wurde, aber das löst nicht das zugrunde liegende Problem, dass dies nicht abwärtskompatibel ist.
Ich hoffe, ich irre mich :)
Das funktioniert nicht in Opera für Windows. (Das haben Sie wahrscheinlich schon erraten, aber ich melde es vom Feld. :)
Dies scheint nicht beachtet zu werden, wenn Sie mit der Tastatur durch die Seite navigieren. Sollte scroll-margin/padding dort nicht auch angewendet werden?
scroll-paddingist hier auch erwähnenswert und für diesen speziellen Anwendungsfall etwas besser geeignet. Sie wenden es auf den Scroll-Container statt auf die Ziel-Elemente an. Ich verwende scroll-padding, wenn alles in einem Container versetzt werden muss, und scroll-margin für einzelne Ziel-Versettungen.Für diejenigen, die sich über mangelnde IE11-Unterstützung oder die Tatsache beschweren, dass Chromium Edge nicht auf jedem Computer verfügbar ist: Dies beeinträchtigt das Erlebnis nicht, sondern verbessert nur die Browser, die auf dem neuesten Stand sind.
Worüber beschweren Sie sich also genau?
Es wäre großartig, wenn dies auch für Header mit variabler Höhe funktionieren würde. Etwas wie
Dies würde den Abstand automatisch an die aktuelle Höhe des #header-Elements anpassen.
Die Unterstützung ist im Moment noch nicht ganz universell, aber schon ziemlich gut.
Danke für diesen schönen Trick!
Ist das clever oder übersehe ich etwas?
Leider unterstützt Safari scroll-margin außerhalb von Scroll-Snapping-Containern nicht.
Wir könnten diesen Margin-Effekt auch für alte IE nachahmen
:target::before {content: "";
display: block;
position: relative;
bottom: 0;
width: 0;
height: 5rem; /* Höhe des Headers */
margin-top: -5rem;
}
Danke! Sie haben mich gerettet.