Sprungmarken: Fixed Header mit CSS und der Pseudoklasse :target ausgleichen

Der sogenannte fixed Header bleibt stehen, wenn nach unten gescrollt wird. Werden dann interne anchor tags als Sprungmarken genutzt, wird der erste Teil des Textes vom fixierten Header verdeckt. Nur mit CSS, und ganz ohne JavaScript, kann dieser optische Fehler behoben werden.

Der Fixed Header ist in den letzten Jahren sehr populär geworden. Auch ich nutze ihn auf meinen Webseiten. Damit bleibt die Hauptnavigation immer erreichbar, ebenfalls wenn man sich ganz am Ende der Seite befindet. Ich nutze den named anchor hauptsächlich direkt für Überschriften, in Verbindung mit dem Inhaltsverzeichnis, bei längeren Artikeln. Ohne diesen Fix wird aber genau diese Überschrift dann nicht angezeigt, weil von der Top-Navigation abgedeckt.

Der Name „named anchor“ kommt übrigens von der veralteten Nutzungsweise:

<a name="[anchor-name]"></a>

Aber auch Dreamweaver hatte immer diesen Namen im Menü verwendet.

Beim aktuellen XHTML und HTML5 muss jedoch das id Attribut verwendet werden:

<a id="[anchor-name]"></a>

Die :target Pseudoklasse seit CSS3

Wird ein internes Element einer Webseite aufgerufen, geschieht das mit in der URL mit „#element“. Der Browser versucht, genau zu dieser Sprungmarke zu scrollen und dieses Element am oberen Bildschirmbereich zu platzieren. Fixierte Elemente können dann aber im Weg sein.

Dank der „:target“ Pseudoklasse – nicht mit dem HTML target-Attribut zu verwechseln – können wir aber das aufgerufene Zielelement mittels CSS Ansprechen und anpassen. In unserem Problemfall verschieben wir das Ziel, entsprechend der Header-Höhe nach unten. Mittels :target könnten wir Teile der Webseite aber auch ausblenden, einblenden, die Farbe ändern oder auf andere Weise unseren Bedürfnissen anpassen.

Angenommen die fixe Navigation ist 80px hoch, könnte der CSS Code so aussehen:

:target:before {
	content: "";
	display: block;
	height: 80px; /* same as your fixed header height */
	margin: -80px 0 0; /* negative fixed header height */
}

Genau gesagt wird damit ein Block mit 80px Höhe über dem Zielelement geschoben, was den Content genau unter den Header rutschen lässt.
Problem gelöst. Ganz ohne JavaScript und zusätzlichen Ressourcenverbrauch.

Damit du auch sehen kannst, wovon ich spreche, hab ich noch mal zwei Screenshots gemacht. Beim ersten Bild wird die Überschrift von der Navi verdeckt. Beim zweiten ist die Überschrift unter die Navi gerutscht und so voll sichtbar.

Vorher Bild:

Fixed Header vorher - Überschrift ist verdeckt
Fixed Header vorher – Überschrift ist verdeckt

Nacher Bild:

Fixed Header nachher - Überschrift ist sichtbar
Fixed Header nachher – Überschrift ist sichtbar

Ich bin immer wieder erstaunt, was mit CSS alles möglich ist. Vier kurze Zeilen in der style.css und schon hüpfen die internen Links genau auf die richtigen Stellen.

Referenzen:
http://www.w3schools.com/tags/att_a_target.asp
http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors
http://www.w3schools.com/cssref/sel_target.asp

Verfasst in: WordpressTags: , ,
5 Kommentare
  1. Hallo Jochen,
    toller Tipp, vielen Dank.
    Allerdings scheint das nur beim ersten laden mit Springmarken #tag zu klappen. Wenn ich das zweite mal das Inhaltsverzeichnis nutze, ist die statische Navigation wieder drüber. Kennst du das Problem? Grüße, Matthias

  2. Hallo Matthias,
    ich bin mir nicht sicher was du meinst.

    Ich nutze ja auch hier diesen Header-Fix. Auf Seiten mit Inhaltsverzeichnis hab ich versucht deine Erläuterungen nachzuvollziehen. Ich fand hier aber kein Problem.

    lg
    Jochen

  3. Hallo Jochen,

    tatsächlich, bei dir scheint es zu gehen. Dabei habe ich deinen CSS code direkt übernommen. Wenn du Lust hast, kannst du ja mal bei mir schauen. Habe extra einen Beitrag ausgewählt, indem Oran Utans vorkommen, da bleibt es für dich vielleicht interessant ;)

    http://blog.spontanumdiewelt.de/bukit-lawang-orang-utan/#Der_Mann_im_Wald

    Wenn ich die URL mit #Der_Mann_im_Wald direkt lade (wie oben) dann klebt es. Die Navigationsleiste überdeckt die Überschrift nicht. Wenn ich dann allerdings im Inhaltsverzeichnis erneut klicke oder zu einer anderen Stelle springe, verdeckt die Navigation wieder alles, so als hätte ich deinen Trick gar nicht implementiert. An anderer Stelle im Internet habe ich gelesen, dass das ein bekannter Bug ist. Deswegen wundert es mich, dass es bei dir klappt.

    Hast du irgendwelche Ideen, was ich ändern oder testen könnte?

    Vielen Dank.
    Liebe Grüße von Bali
    Matthias

  4. Hallo Jochen,

    Problem gelöst! Das Table of Contents Plugin hat ein Runterscrollen statt Springen implementiert (keine Ahnung wie) Ich habe es deaktiviert, jetzt klappts.
    Vielen Dank für den tollen Tipp!

    Matthias

  5. Schön, dass du dein Problem lösen konntest.
    Deine Seite finde ich übrigens richtig gut.

    Jochen


Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kommentar *

Name *
E-Mail *
Webseite