@@Camping_RIDER > Prinzipiell geht sowas mit [JavaScript/DOM/Event/scroll](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/scroll) Wann immer man sagt „geht mit `scroll`{: style="border: none; padding: 0; background: transparent"}“, sollte man fragen: Geht’s auch ohne? Aufs `scroll`{: style="border: none; padding: 0; background: transparent"}-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`{: style="border: none; padding: 0; background: transparent"} 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`{: style="border: none; padding: 0; background: transparent"} 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`{: style="border: none; padding: 0; background: transparent"}- und `resize`{: style="border: none; padding: 0; background: transparent"}-Events lauschen (und nicht auf `scroll`{: style="border: none; padding: 0; background: transparent"}). Sieht dann so aus: [CodePen](http://codepen.io/gunnarbittersmann/pen/MpyrJw) LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@Camping_RIDER > Prinzipiell geht sowas mit [JavaScript/DOM/Event/scroll](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/scroll) Wann immer man sagt „geht mit `scroll`{: style="border: none; padding: 0; background: transparent"}“, sollte man fragen: Geht’s auch ohne? Aufs `scroll`{: style="border: none; padding: 0; background: transparent"}-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`{: style="border: none; padding: 0; background: transparent"} 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`{: style="border: none; padding: 0; background: transparent"} 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`{: style="border: none; padding: 0; background: transparent"}- und `resize`{: style="border: none; padding: 0; background: transparent"}-Events lauschen (und nicht auf `scroll`{: style="border: none; padding: 0; background: transparent"}). Sieht dann so aus: [CodePen](http://codepen.io/gunnarbittersmann/pen/MpyrJw) LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)