FROM CACHE - de_header

header.liquid Farbänderung beim Scrollen

Gelöst

header.liquid Farbänderung beim Scrollen

AnnaBe
Pfadfinder
117 21 37

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!

2 AKZEPTIERTE LÖSUNGEN

AnnaBe
Pfadfinder
117 21 37

Erfolg.

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

Lösung in ursprünglichem Beitrag anzeigen

Gabe
Shopify Staff
18515 2908 4270

Erfolg.

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.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

2 ANTWORTEN 2

AnnaBe
Pfadfinder
117 21 37

Erfolg.

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
Shopify Staff
18515 2908 4270

Erfolg.

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.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog