@@michaah > > Geht nicht auch sticky? ... > > Gute Idee, unterm Strich sogar besser. Njein. Ich hab je hier auch schon öfter [erzählt](https://forum.selfhtml.org/self/2018/mar/27/footer-immer-ganz-unten/1717543#m1717543) und [gezeigt](https://codepen.io/gunnarbittersmann/pen/JLMjpQ), 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](https://codepen.io/gunnarbittersmann/pen/NYqmVp), 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**[^edit] 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. [^edit]: nachträglich eingefügt (Just in dem Moment bin ich gerade dran, das in dem Projekt, an dem ich arbeite, umzusetzen.) Ohne JavaScript geht bei *sticky ~~fing~~ header*{:@en} 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](https://codepen.io/gunnarbittersmann/pen/qBEXVKZ). 😷 LLAP -- *„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“* —@Ann_Waeltin

@@michaah > > Geht nicht auch sticky? ... > > Gute Idee, unterm Strich sogar besser. Njein. Ich hab je hier auch schon öfter [erzählt](https://forum.selfhtml.org/self/2018/mar/27/footer-immer-ganz-unten/1717543#m1717543) und [gezeigt](https://codepen.io/gunnarbittersmann/pen/JLMjpQ), 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](https://codepen.io/gunnarbittersmann/pen/NYqmVp), 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**[^edit] 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. [^edit]: nachträglich eingefügt (Just in dem Moment bin ich gerade dran, das in dem Projekt, an dem ich arbeite, umzusetzen.) Ohne JavaScript geht bei *sticky ~~fing~~ header*{:@en} 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](https://codepen.io/gunnarbittersmann/pen/qBEXVKZ). 😷 LLAP -- *„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“* —@Ann_Waeltin

@@michaah > > Geht nicht auch sticky? ... > > Gute Idee, unterm Strich sogar besser. Njein. Ich hab je hier auch schon öfter [erzählt](https://forum.selfhtml.org/self/2018/mar/27/footer-immer-ganz-unten/1717543#m1717543) und [gezeigt](https://codepen.io/gunnarbittersmann/pen/JLMjpQ), 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](https://codepen.io/gunnarbittersmann/pen/NYqmVp), 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 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*{:@en} 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](https://codepen.io/gunnarbittersmann/pen/qBEXVKZ). 😷 LLAP -- *„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“* —@Ann_Waeltin