Aloha ;)
Prinzipiell geht sowas mit JavaScript/DOM/Event/scroll
Wann immer man sagt „geht mit
scroll
“, sollte man fragen: Geht’s auch ohne?Aufs
scroll
-Event reagieren (das etliche Male pro Sekunde feuert), ist nichts, was man tun möchte, wenn man nicht muss.
Richtig. Das habe ich zu dem Zeitpunkt nicht bedacht.
Was braucht man hier? Für den farbigen Hintergrund eine Box derselben Größe wie das Navigationsmenü, die ebenso wie dieses
fixed
positioniert ist und sich hinter dieser sowie hinter dem Bild (was wegscrollt) befindet.Box derselben Größe wäre einfach zu bewerkstelligen mit einem Pseudoelement des Navigationsmenüs. Es wollte mir aber kein Weg einfallen, wie man das Bild dann (in z-Richtung) zwischen Navigationsmenü und Pseudoelement bekommt.
Box also Pseudoelement eines anderen Elements;
header
bietet sich an. Dann muss man dafür soregen, dass dieses dieselbe Höhe hat wie das Navigationsmenü (die unbekannt ist; bei schmaleren Viewports kann das ja auch mehrzeilig werden). Dafür braucht man dann JavaScript:Höhe des Navigationsmenüs auslesen und dem Pseudoelement zuweisen. Das muss man aber nur einmal am Anfang tun und bei Änderungen der Viewportgröße, d.h. lediglich auf
load
- undresize
-Events lauschen (und nicht aufscroll
).
Danke für den Input 😉
Sieht dann so aus: CodePen
Da ist noch eine kleine Unzulänglichkeit imho - scroll mal so, dass der untere Rand des header-Bild halb über der Navigationsleiste liegt.
Das liegt am z-index, mit dem das Pseudo-Element hinter dem header-Bild versteckt wird.
Mir mag leider auf der Grundlage deines Pen grad auf die Schnelle kein einfacher fix dafür einfallen.
Grüße,
RIDER