Bei Fixed Haeder die Ankerposition ändern

[Gunnar Bittersmann]

@@NoWissen

Wenn ich dich richtig verstanden habe (was bei deiner Problembeschreibung nicht gerade einfach ist), geht es dir darum, dass bei einem feststehenden Header beim Anspringen eines seiteninternen Fragments (Ankers) dieses an die obere Bildschirmkante scrollt und dort durch den Header verdeckt wird, richtig?

.position::before {
   display: block;
   content: "";
   height:108px;
   margin-top: -108px;
   visibility: hidden;
   }

Wo kommen die 108px her? Das ist eine magic number und sowas ist keine gute Idee.

Das Problem ist, dass du nicht wissen kannst, wie hoch der Header ist. Das ist abhängig davon, ob beim Nutzer alles in eine Zeile passt, vom beim Nutzer verwendeter Schriftart und -größe und und und …

Man kann die Höhe des Headers mit JavaScript auslesen und beim Anspringen eines seiteninternen Fragments (Ankers) die Seite um diesen Wert (evtl. plus etwas mehr für oberen Abstand) nach unten verschieben, wie in diesem Pen gemacht. (Denk dir die Grafik weg.)

Ohne JavaScript darf der Header dann nicht fixiert sein.

Eine andere Möglichkeit ist, nicht die gesamte Seite zu scrollen, sondern nur den Bereich unter dem Header, wie in jenem Pen gemacht. Die Aufteilung des body in den feststehenden Header und den scrollbaren Bereich erfolgt dabei mit Flexbox oder Grid.

LLAP 🖖