Textfarbe ändert sich beim scrollen (soll so)

  • Hallo, mal eine Frage nach einem Ansatz... wie schaffe ich es dass sich die Textfarbe durch die Hintergrundfarbe ändert ? Also Ich habe mehrere Div Boxen und da ist Inhalt drinnen, 1 Box schwarz oben die Nav weisse Schrift... man scrollt runter dann weisser Hintergrund... aber die Schrift bleibt weiss... wie stelle ich es an dass die Schriftfarbe sich ändert... natürlich vor und zurück scrollen... und mehr ebenen... also weiss-schwarz-weiss-schwarz usw... Bin mega happy über Vorschläge :)

  • Hast du zufällig ein Beispiel parat ? Ansonsten würde ich jetzt vermuten du möchtest eine fixed-Navigation, die beim herunterscrollen ab einem gewissen Punkt den Hintergrund und die Schriftfarbe wechselt?

  • Hast du zufällig ein Beispiel parat ? Ansonsten würde ich jetzt vermuten du möchtest eine fixed-Navigation, die beim herunterscrollen ab einem gewissen Punkt den Hintergrund und die Schriftfarbe wechselt?

    Ganz genau das möchte ich :) Muss aber nicht nur auf die Navigation bezogen sein, auch Logo wäre Klasse

  • Achso, ich glaub wir haben uns falsch verstanden :D Ich will quasi dass die sticky-nav einen transparenten Hintergrund hat.. und wenn sie zB oben ist ist der sichtbare Bereich schwarz das Logo und die Schrift in der Nav Weiß, scrolle ich runter kommt die nächste section mit weissen Hintergrund... dann soll sich die Farbe des Logos sowie die Farbe des Textes auf Schwarz ändern, kommt die nächste Section dann eben wieder anders herum... Auch wenn ich hin und her scrolle :) Ich brauche wohl JavaScript dafür oder ? Trotzdem schonmal vielen lieben Dank :)

  • Hast du hierfür ein kleines Beispiel? Möchtest du die Nav nach jeder Section ändern oder nur einmalig beim herunterscrollen? Denn die hintergrundfarbe ändern ist ja nur ne css regel.

  • Ich weiß wie er das meint.
    Ohne JS geht das glaube ich nicht, ich wüsste jetzt nicht wie.
    Deine Navigation, die du sticky

    hast, soll ja ab einen bestimmten Container den Style ändern.


    Ich würde es so versuchen.
    Den Container einer ID geben und bei einem scholl Event den Abstand von oben ( -höhe Navigation) auslesen.
    Ist der Abstand kleiner als die Höhe der Navigation änderst du den Style.
    Wird der Abstand wieder größer dann nimmst du den Style wieder weg.
    Ist eigentlich nicht schwer, nur ohne JS fällt mir gerade kein weg ein.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!