Navileiste soll sich beim scrollen verfärben

[Linda]

Hallo zusammen,

kann mir jemand sagen wie ich eine Navleiste nach dem scrollen verfärben lassen?

Vielen Dank!

LG Linda

[Camping_RIDER]

Aloha ;)

kann mir jemand sagen wie ich eine Navleiste nach dem scrollen verfärben lassen?

Prinzipiell geht sowas mit JavaScript/DOM/Event/scroll — für mehr Antwort bräuchte ich mehr / genaueren Input.

Grüße,

RIDER

[Linda]

Zur Veranschaulichung: http://graphicmonkeyz.com/roselinde/index.html

Die Navleiste ist aktuell ohne Hintergrund, nachdem über das Headerfoto gescrollt wurde braucht die Nav für eine gute Erkennbarkeit einen leichten Hintergrund.

Ich habe alles in sections aufgeteilt!

Muss ich im Javascript also angeben ab welcher Section die Nav eine andere Farbe haben soll?

Wie hinterlege ich das dann in CSS?

Gruß

[beatovich]

hallo

Syntaxfehler sind immer die unbekannten Mitspieler: gefunden in deinem Code:

		</tr>
		<div id="burgermenue">
			<img src="img/icon/burgermenue.png">
		</div>					
		</table>

[Gunnar Bittersmann]

@@beatovich

Syntaxfehler sind immer die unbekannten Mitspieler: gefunden in deinem Code:

		</tr>
		<div id="burgermenue">
			<img src="img/icon/burgermenue.png">
		</div>					
		</table>

Womit nicht nur der fehlende Alternativtext fürs Bild gemeint ist.

LLAP 🖖

[Camping_RIDER]

Aloha ;)

Zur Veranschaulichung: http://graphicmonkeyz.com/roselinde/index.html

Die Navleiste ist aktuell ohne Hintergrund, nachdem über das Headerfoto gescrollt wurde braucht die Nav für eine gute Erkennbarkeit einen leichten Hintergrund.

Ich habe alles in sections aufgeteilt!

Muss ich im Javascript also angeben ab welcher Section die Nav eine andere Farbe haben soll?

So in etwa. Du kannst bei window auf das scroll-Event lauschen und dann prüfst du, ob der Wert, um den insgesamt gescrollt wurde, größer oder kleiner/gleich der von dir berechneten Höhe deines Headerfotos ist (eventuell abzüglich Navleiste, je nachdem wie du das gerne hättest), und falls der Wert größer ist, gibst du der Navleiste eine zusätzliche Klasse, die du ihr wieder weg nimmst, sobald der Scroll-Wert kleiner der entsprechend von dir berechneten Höhe ist.

Wie hinterlege ich das dann in CSS?

Die Navleiste kann von Haus aus mit dem Hintergrund gestylet sein, der über dem Headerfoto aktiv sein soll, und mit zusätzlicher Klasse kannst du dann ein anderes Hintergrundbild angeben.

Grüße,

RIDER

[Linda]

...Wenn möglich sollte sich nicht nur die Nav selbst verfärben sondern auch die einzelnen Menüelemente inklusive Logo, welches als jpg eingebunden ist.

[Camping_RIDER]

Aloha ;)

...Wenn möglich sollte sich nicht nur die Nav selbst verfärben sondern auch die einzelnen Menüelemente

Das ist mit entsprechend wechselnder Klasse via CSS kein Problem und …

inklusive Logo, welches als jpg eingebunden ist.

… dafür musst du entweder im Javascript Hand an das src-Attribut des Bildes legen oder falls das infrage kommt, das Bild nicht als Bild, sondern als Hintergrundbild eines passenden Elements wählen, sodass auch das via CSS von der Klasse abhängig gemacht werden kann.

Grüße,

RIDER

[Linda]

Vielen Dank!

[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 🖖

[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

[Gunnar Bittersmann]

@@Camping_RIDER

Sieht dann so aus: CodePen

Da ist noch eine kleine Unzulänglichkeit

Da war noch eine große Unzulänglichkeit: Bei Tastaturnavigation zum Inhalt per Skip-Link war die Überschrift von der Navigation überdeckt. Habe main entsprechendes padding-top und header negativen margin-bottom verpasst.

imho - scroll mal so, dass der untere Rand des header-Bild halb über der Navigationsleiste liegt.

Ja, das ist mir bewusst.

Das liegt am z-index, mit dem das Pseudo-Element hinter dem header-Bild versteckt wird.

Das muss ja so.

Mir mag leider auf der Grundlage deines Pen grad auf die Schnelle kein einfacher fix dafür einfallen.

Ich hab das mal mittels background-position: left 100vh abgemildert – für manche Seitenverhältnisse. Wegen background-size: cover müsste man da noch etwas rumrechnen, damit immer die jeweilig sichtbare Unterkante des Hero-Bilds im Pseudoelement zu sehen ist.

LLAP 🖖