Ziel einer Sprungmarke wird von sticky header verdeckt

[marctrix]

Hej alle,

letzten Monat hatte ich das Problem zu lösen, dass ich Linkziele auf einer Seite hatte, die beim Anspringen von einem sticky header verdeckt wurden.

@Gunnar Bittersmann hatte eine Lösung, die auch in der Regel (wenn man bestimmte Dinge bei der HTML-Struktur der Seite beachtet) funktioniert, in meinem Fall (vorgegebenes HTML durch Wordpress) aber das Problem erzeugte, dass man nur scrollen konnte, wenn die Maus auf dem Main-Bereich der Seite lag.

Darüber hinaus gibt es auch noch Lösungen mit JavaScript (beides nachzulesen unter dem Link oben "problematische Seite").

Heute treffe ich mal wieder bei Mozilla stöbernd (kann ich nur sehr empfehlen!) auf die Lösung des Problems. Es gibt eine CSS-Eigenschaft scroll-margin die man für genau diesen Fall (man scrollt oder springt per seiteninternem Link an eine Stelle) einen margin festlegen kann. Wenn man dort denselben Wert einträgt wie für die Höhe des Headers, ist das Problem gelöst - die Höhe des Headers bekommt man freilich wiederum nur per JS. Als Fallback lässt sich die Standrad-Höhe des headers angeben, aber Nutzereinstellungen können freilich dafür sorgen, dass der header bei dem einen oder anderen höher ist und dann wird der margin zu klein sein.

Nichtsdestotrotz ist diese Eigenschaft und alles weitere in dem Video "Scroll Snap in CSS Instead of JavaScript" wert, beachtet zu werden. Oder kanntet ihr schon scroll-snap-align und scroll-snap-type?

Falls eure Antwort "nein" lautet, schaut mal rein - und stöbert auch mal ein bisschen weiter bei Mozilla.

Marc