Navileiste soll sich beim scrollen verfärben

[Gunnar Bittersmann]

@@Camping_RIDER

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.

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 sorgen, 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).

Sieht dann so aus: CodePen

LLAP 🖖