Idee
Im WP Astra Theme habe ich einen Header definiert. Dies ist die Hauptleiste einer Webseite, welche den Titel, ein Logo und das Menü enthält. Dabei wollte ich diesen Header oben fest anheften. Dies geht durch die „Sticky Header“ Funktion in dem Astra Theme.
Soweit so gut. Der Header haftet permanent oben an der Webseite, egal wie viel man scrollt.
Problem
Da ich nun zu dem Sticky Header auch noch die Standard HTML Anker nutzen wollte, brachte dies einige Probleme. Bei dem Klick auf einen Anker verdeckte der fest angebrachte Sticky Header immer die Überschrift. Man sah also nur den Beschreibungstext ohne die eigentliche Überschrift.
Lösung
Folgender CSS Code brachte die Lösung:
h2[id]::before {
content: '';
display: block;
height: 150px;
margin-top: -150px;
visibility: hidden;
}Nun springt der Anker Link trotz eines Sticky Headers genau an die richtige Stelle (mit einem Abstand von 150 Pixeln nach oben).
hi
danke für den tip.
habe den CSS-code entsprechend eingebaut, die sprunganweisung an #content funktioniert jetzt korrekt bei meinem sticky header von 106px.
ABER: am schluss der seite generiert firefox einen leeren block vor dem footer in der höhe von ca. 250px.
diese CSS-anweisung generiert also einen overflow, der nicht zu kontrollieren ist, und den jeder browser anders interpretiert.
es bräuchte also entsprechend zusätzliche anweisungen, damit dieser leerraum wieder verschwindet – habe vieles ausprobiert, bisher ohne erfolg.
mein CMS: wordpress, theme Xtreme One mit YAML, das float und clear eingebaut hat, ebenso clearfix zur kontrolle von overflow
NACHTRAG:
Die dargestellte CSS-Anweisung ist völlig veraltet und sollte wegen der vielen Nebeneffekte nicht mehr angewendet werden.
Nach einiger Suche fand ich die modernste Lösung für dieses Problem:
„scroll-margin-top: [x-]rem;“, wobei [x-] für den jeweiligen sticky-header ausgerechnet werden muss, bei mir ist es „9.325“
Damit entfallen sämtliche Nebeneffekte wie Leerraum etc.