Stickey-Header sind Navigationsleisten, die beim scrollen der Seite immer oben fixiert sind. Die sehen nicht nur schick aus, sondern bringen für den Benutzer besondere Vorteile. Wenn da nicht doch noch was im Wege steht.

Du findest den Sticky-Header auf dieser Webseite ganz oben, wo sich das Logo und das Hauptmenü befindet.

Es kommt nicht selten vor, dass die sogenannten Ankerpunkte bzw. Sprungmarken auf der Webseite verteilt sind. Diese verwendet man um intern auf der Seite zu navigieren. Klickt man auf einen solchen Link, wird man schnell bemerken, dass der Ankerpunkt hinter den Stickey-Header verschwindet und einen Teil der Information nicht mehr lesbar ist.

Damit der Text wieder im sichtbaren Bereich erscheint, kann man dies mit einem CSS-Code sehr gut lösen.

Tipp

Mit einer Klasse: Diese Lösung ist eher nicht für die Webseitenbetreiber empfehlenswert, wenn bereits viele Artikel vorhanden sind, da man viele Seiten nach den Ankern durchforsten muss.

.klassenname {
display: block;
position: relative;
top: ??px; /* Wert der Verschiebung */
visibility: hidden;
}

Ohne Klasse: Bei diesem Lösungsweg müssen keine Klassen extra vergeben werden.

:target::before {
content: "";
display: blog;
height: ??px; /* Wert der Verschiebung */
}

Nach der richtigen Angabe des Wertes, wird der Ankerpunkt bzw. die Sprungmarke nicht mehr verdeckt, sondern unterhalb des Sticky-Headers angezeigt.