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: , ,

Willst du an der Diskussion teilnehmen?


Kommentar verfassen

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

Kommentar *

Name *
E-Mail *
Webseite