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

[Linuchs]

Ich habe das Problem, dass die sticky Überschrift transparent ist und damit unkenntlich ist:

table.liste thead {
  position: sticky;
  top: 5px;
  background-color: #fe0;
}

Transparenz habe ich nicht angegeben. Ist das eine Macke vom Firefox bei „sticky”?

Uups, ich sehe gerade, dass die mit dem thead optisch verschmolzenen Links anklickbar sind. Dafür nicht mehr die Schaltflächen des thead, die den Tabellensort auslösen.

Ich hätte gerne, dass die gescrollten Zeilen hinter dem thead verschwinden und der thead lesbar ist.

Gruß, Linuchs

[JürgenB]

Hallo,

irgenwie liegt der thead unter dem tbody. Gib dem thead mal einen genügend großen z-index (bei mir reichte 1), dann sollte es gehen.

Allerdings verstehe ich nicht so ganz, warum die in 8 Teile zerlegte Tabelle sortierbar ist. Wenn du nicht alles zeigen willst, solltest du serverseitig sortieren.

Gruß
Jürgen