Navileiste soll sich beim scrollen verfärben

[Camping_RIDER]

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- und resize-Events lauschen (und nicht auf scroll).

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