Sticky Header und Anchor IDs
Plugins

Anchor-Links und Sticky Header

Anchor-Links sind eine tolle Sache, wenn man Sprungmarken innerhalb einer Webseite verwenden möchte. Der Benutzer soll also nicht einfach auf eine Seite XY springen, wenn er auf einen Link klickt, sondern innerhalb dieser Seite an eine speziell markierte Stelle.

Was genau ist ein Anchor-Link?

Wenn du dir das grad nicht so recht vorstellen kannst, habe ich dir hier ein Beispiel. Wenn du auf diesen Link klickst kommst du auf die FAQ-Seite von Zweitbüro Online Marketing und landest dort mitten in der Seite beim Eintrag, der von der Vorbereitung handelt.

Das ist ganz einfach möglich, indem der besagte Beitrag mit einem Anchor (Anker) markiert wird, in diesem Fall war das #vorbereitung. Indem der Link nun nicht einfach auf zweitbuero.ch/faq geht, sondern hinten noch der Anchor angehängt wird (zweitbuero.ch/faq#vorbereitung), springt man nach dem Laden der Seite zu eben diesem Anchor.

Das Problem mit Sticky Headers

Anchor-Links haben immer die gleiche Wirkung: Der Browser springt an die besagte Stelle, so dass diese ganz oben im Browser angezeigt wird.

Wenn man sogenannte sticky Header verwendet, also Kopfbereiche (mit Logo, Navigationsmenü, etc), die am oberen Bildschirm „kleben“ bleiben, dann führt das bei Anchor-Links zu Problemen.

Der oben „angeklebte“ Header verdeckt nämlich den obersten Teil des Bildschirms. Das kommt daher, dass ein sticky Header eben kein fixes Element in der Seite ist, sondern mittels CSS code sozusagen künstlich immer am oberen Rand gehalten wird.

Der Browser springt also korrekt zur definierten Sprungmarke (Anchor). Dass der Teil, in dem dieser Inhalt angezeigt wird, von einem anderen Element verdeckt wird (dem sticky Header), kümmert ihn nicht.

Viele Themes lösen dieses Problem (das übrigens nicht nur bei Anchor Links auftaucht) damit, dass sie einen sogenannten Offset festlegen. Ist der sticky Header beispielsweise 90 Pixel hoch, so definiert das Theme ein Inhaltsbereich einfach um 90 Pixel tiefer, womit alles wieder aufgeht.

Warum auch immer, bei Anchor-Links funktioniert das aber trotzdem häufig nicht, so dass zumindest ein Teil des Inhalts unter dem Header zu liegen kommt und von eben diesem verdeckt wird.

Offset mit Plugin einfügen

Lösen lässt sich das mit einem separaten CSS-Code, der einen Offset bei Anchor-Links einfügt, was entsprechende Kenntnisse bedingt.

Noch einfacher und damit insbesondere für Anfänger geeignet ist ein Plugin namens „Page Scroll to ID„. Es ist kostenlos und kann noch einen ganzen Haufen mehr als die meisten brauchen. Unter anderem bietet es schöne Scroll-Effekte.

Einmal installiert funktioniert es eigentlich schon problemlos für das eben beschriebene Problem. Lediglich den gewünschten Offset muss man an entsprechender Stelle noch eintragen.

Den richtigen Wert kann man entweder durch ausprobieren ausfindig machen oder man nutzt ein Tool, das Pixel vermessen kann. Vorsicht: Wenn du in WordPress eingeloggt bist, erschent zusätzlich zum sticky Header auch noch die Admin-Zeile. Entsprechend kannst du noch 30 Pixel abziehen.

Schreiben Sie einen Kommentar

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