header position: fixed; padding-top des darunter liegenden Elements anpassen

[Gunnar Bittersmann]

@@michaah

Geht nicht auch sticky? ...

Gute Idee, unterm Strich sogar besser.

Njein.

Ich hab je hier auch schon öfter erzählt und gezeigt, mit sticky sei all gut. Weit gefehlt.

Das löst zwar das Problem, dass der Seiteninhalt initial nicht unterm Header verschwindet. Andere Probleme fangen aber erst an:

Wenn seiteninterne Sprungmarken vorhanden sind, werden die beim Anspringen am oberen Bildschirmrand plaziert, d.h. hinter dem Header versteckt. Die müsste man dann doch mit JavaScript um die Headerhöhe (plus etwas Luft) nach unten scrollen. Und das nach Möglichkeit etwas intelligenter als in diesem Beispiel, wo auch Artikel 30 unnötigerweise nach unten und damit aus dem Viewport heraus gescrollt wird.

Wenn die Seite interaktive Elemente (Links, Formularfelder, …) enthält, werden diese bei Bedienung mit Tastatur^[1] bei Bedarf auch am oberen Bildschirmrand plaziert, d.h. hinter dem Header versteckt. Auch die müssen per JavaScript in den sichtbaren Bereich gescrollt werden.

(Just in dem Moment bin ich gerade dran, das in dem Projekt, an dem ich arbeite, umzusetzen.)

Ohne JavaScript geht bei sticky fing header gar nichts. position: sticky sollte also auch mit JavaScript erst dann gesetzt werden, wenn das dazu nötige JavaScript geladen wurde.

Oder man setzt halt nicht position: sticky für den Header, sondern man macht den Hauptbereich (main-Element) scrollbar.

😷 LLAP

---

1. nachträglich eingefügt ↩︎