header.liquid Farbänderung beim Scrollen

[AnnaBe]

Hallo liebe Community, ich verzweifle gerade an einer Kleinigkeit und zwar habe ich einen transparenten sticky Header, der beim runterscrollen weiß wird. Die Schrift der Navigation und die Such-, Konto- und Warenkorb Icons sind weiß und sollen beim runterscrollen schwarz werden, damit man sie sieht. Und das funktioniert nicht. Ich habe dafür folgenden Code im header.liquid (Ausschnitt, der erste Teil funktioniert, der zweite nicht): 

.header.scrolled {
background-color: white;
}

.header.scrolled .header__navigation {
color: black;
}

Kann jemand helfen? Ein dickes Dankeschön im Voraus!

[AnnaBe · Accepted solution]

Hallo nochmal, ich habe es hinbekommen mit folgendem Code:

.list-menu__item {
color: white;
transition: color 0.5s ease-in-out;
}
.header.scrolled .list-menu__item {
color: black;
transition: color 1s ease-in-out;
}

.header__icon {
color: white;
transition: color 0.5s ease-in-out;
}
.header.scrolled .header__icon {
color: black;
transition: color 0.5s ease-in-out;
}
.header-wrapper {
width: 100vw;
}

Viele Grüße

[AnnaBe · Accepted solution]

Hallo nochmal, ich habe es hinbekommen mit folgendem Code:

.list-menu__item {
color: white;
transition: color 0.5s ease-in-out;
}
.header.scrolled .list-menu__item {
color: black;
transition: color 1s ease-in-out;
}

.header__icon {
color: white;
transition: color 0.5s ease-in-out;
}
.header.scrolled .header__icon {
color: black;
transition: color 0.5s ease-in-out;
}
.header-wrapper {
width: 100vw;
}

Viele Grüße

[Gabe · Accepted solution]

Hey @AnnaBe 

Wow, super und ja, man kann die Farbe der Navigation und der Icons ändern, indem man den Code wie von dir vorgeschlagen verwendet. Die Verwendung von CSS-Übergängen ermöglicht es, eine sanfte Farbänderung zu erzielen, wenn der Header gescrollt wird.

Deine Lösung ändert die Farbe der Navigationselemente und Icons von Weiß auf Schwarz, wenn der Header gescrollt wird, da, wie gesagt, die Verwendung von CSS-Übergängen sorgt dafür, dass die Farbänderung sanft und fließend erfolgt.

Man kann auch die Übergangszeit und die Art der Übergänge (z. B. linear, swing usw.) anpassen, um das gewünschte Ergebnis zu erzielen. Außerdem wird mit dem Code .header-wrapper { width: 100vw; } die Breite des Header-Bereichs auf die volle Bildschirmbreite gesetzt, um sicherzustellen, dass der Header immer vollständig sichtbar ist, unabhängig von der Bildschirmbreite des Geräts.