feststehender header

[Roter Sand]

Ich habe nur lckenhafte html- und css-Kenntnisse.

Ich möchte erreichen, daß der header feststehend bleibt, während der body mit Text usw. nach oben gescrollt wird. Z-index 10 hat im header-grid nicht funktioniert.

Das angehängte Bild zeigt die Typik.

[Matthias Scharwies]

Servus!

Ich habe nur lckenhafte html- und css-Kenntnisse.

Ich möchte erreichen, daß der header feststehend bleibt, während der body mit Text usw. nach oben gescrollt wird. Z-index 10 hat im header-grid nicht funktioniert.

Das angehängte Bild zeigt die Typik.

Was hast du probiert?

Wo kann man Dein Beispiel sehen?

→Warum online-Beispiele besser als das Posten von Code sind!

Ohne dies können wir nur spekulieren.

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo,

… lckenhafte … 😀

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/position#position:_sticky könnte helfen.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/position#position:_sticky könnte helfen.

Nein, das allein ist eher schädlich als dass es hilft. Bei Tastaturnavigation kann so das fokussierte Element durch den Header verdeckt sein. Beim Anspringen seiteninterner Links ist deren Beginn durch den Header verdeckt.

Beides sollte vermieden werden, indem man scroll-padding-top auf die Höhe des Headers setzt. Da man diese i.a.R. nicht kennen kann, muss sie mit JavaScript ermittelt werden – initial^[1] und bei Änderungen der Höhe, letzteres am besten mit ResizeObserver.^[2] Die Übergabe erfolgt dann vorzugsweise über eine custom property.

Zu sehen, wo nie ein Mensch zuvor gewesen ist.

🖖 Живіть довго і процвітайте

---

1. https://forum.selfhtml.org/self/2023/feb/26/array-findlast-in-php/1806712#m1806712 ff. ↩︎

2. https://forum.selfhtml.org/self/2022/mar/06/strange-rendering-bug-im-firefox/1797318#m1797318 unterm Strich ↩︎

[an Gunnar Bittersmsnn]

"Schön zu sehen, wo ich nie gewesen bin." 😀

Ich werde mir die links mal ansehen, wird wohl eine Nummer zu groß für mich werden.

Erst einmal ein Danke für Deine Antwort; auch an die anderen.

[Matthias Scharwies]

Gud'n Abend!^[1]

Ich habe Gunnars Warnung mal als {{Beachten|...}} im Wiki notiert.

Herzliche Grüße

Matthias Scharwies

--

---

1. Kennt ihr das noch von den Mainzelmännchen - als alle Mainstream-öffentlich-rechtliche geguckt haben. ↩︎

[Roter Sand]

Moin, leider habe ich Dein script nicht so zum laufen gebracht, wie ich es in Anbetracht von „Discovery“ erhofft hatte.

„head“ konnte ich mittels eines css-tricks-Beitrags (title in html formatiert) kontrolliert öffnen.

Leider verstehe ich das „display: none“ nicht, da es doch default ist.

Deinem script habe ich ein „hallo, World“ drangehängt, um zu sehen, ob es grundsätzlich läuft, tut es.

Einen schönen Artikel zum Intersection Observer fand ich hier: https://medium.com/coding-beauty/javascript-intersection-observer-cded4e80a377 - leider auch keine Problemlösung für mich dabei.

Zum Screenshot: Ich möchte zunächst erreichen, daß der Kopf (Kanzlei für Sozialrecht pp.; ist ein grid) stehen bleibt und der Rest der html-Datei nach oben scrolled.

Damit kein falscher Eindruck entsteht, ich mache das nur für mich selbst.

[JürgenB]

Hallo,

in diesem Tutorial habe ich den feststehenden Header so realisiert, dass ich nur den Main-Bereich scrolle, vielleicht ja eine Option für dich.

Gruß
Jürgen

[Gunnar Bittersmann]

@@Roter Sand

Moin, leider habe ich Dein script nicht so zum laufen gebracht, wie ich es in Anbetracht von „Discovery“ erhofft hatte.

Wenn du nicht zeigst, was du gemacht hast, kann man dir auch nicht sagen, was du falsch gemacht hast.

„head“ konnte ich mittels eines css-tricks-Beitrags (title in html formatiert) kontrolliert öffnen.

Leider verstehe ich das „display: none“ nicht, da es doch default ist.

Ah, das Zeugs. Brauchst du nicht.

Ich setze head { display: block } und alles darin head > * { display: none }, damit ich ein Element habe, das ich per IntersectionObserver beobachten kann, um die Linie unter dem Header ein- und auszublenden.

Was du brauchst, ist der Teil mit header (nicht zu verwechseln mit head!) und ResizeObserver.

Wie in diesem Beispiel, wo nicht was ist, was ablenkt.

Und in jenem Beispiel ist umgesetzt, was @JürgenB sagte.

🖖 Живіть довго і процвітайте