Wo kann ich ein Script, für eine Navbar finden, die sich in Größe und Farbe beim herunterscrollen ändert?

... komplette Frage anzeigen

2 Antworten

Das Ganze ist relativ simpel, je nach dem was du vor hast. Den Größten Teil nehmen dir die CSS Transitions ab, die zugehörigen Klassen setzt du dann einfach über Javascript. Nun gibt es aber viele Möglichkeiten, dein Vorhaben zu interpretieren, das Grundprinzip sollte jedoch im Großen und Ganzen gleichbleiben.

Im Grunde solltest du einfach nur das Scroll-Event verwenden:

https://developer.mozilla.org/en-US/docs/Web/Events/scroll

Dieses bindest du an das Dokument-Objekt und überprüfst dann die aktuelle Scrollposition. Ist sie größer als 0, dann wurde gescrollt und du setzt entsprechend die Klasse die die veränderte Breite, Farbe etc. hat. (Hierbei musst du ggf. mit margin arbeiten, falls du die Navigation zentriert haben willst.) Ist die Scrollposition jedoch 0, entfernst du die Klasse einfach ggf.

Den Rest (das Ändern der Farbe, das Setzen und Zurücksetzen der Breite etc.) kannst du dann den CSS Transitions überlassen:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_Transitions/Using\_CSS\_transitions

Falls du an weiteren Scrollpositionen im Dokument bspw. die Farbe ändern möchte (geht jetzt nicht genau aus deinem Text hervor), dann funktioniert das relativ ähnlich: Du suchst einfach nach dem nähsten dieser Punkte (in dem unterem Beispiel: jede Sektion) und falls diese bspw. eine bestimmte Klasse (unten: "section-dark") fügst du eine zusätzliche Klasse der Navigation zu mit der entsprechenden Farbe.

Zur Positionsbestimmung der Elemente kannst du Element.getBoundingClientRect() verwenden, welches das Rechteck des Elements mit Positionsangaben relativ zum Viewport zurückgibt:

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Hier eine Demo die die oben genannten Sachen zeigt: (Der Einfachheit halber benutze ich jQuery und SASS)

https://jsfiddle.net/43mmyar4/

Falls das nicht das ist, was du gesucht hast, dann müsstest du dich nochmal etwas genauer ausdrücken.

Edit: Ich lese gerade, dass das Verhalten komplett über Javascript laufen soll, darf ich fragen wieso? Immerhin nimmt dir CSS einen guten Teil der Arbeit ab, ansonsten müsstest du bspw. jQuery.animate (wenn ich mich nicht irre müssen Farbanimationen nachgerüstet werden) o.ä. benutzen.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von Falke3434
23.05.2016, 21:28

Vielen Dank für diese ausführliche Antwort. Ich schätze die vielen verlinkten Beispiele sehr und du hast mir den besten Kommentar geschickt, den ich auf dieser Seite jemals bekommen habe... Ich meinte, dass sich die css Dateien in JavaScript befinden.

0
Kommentar von Falke3434
28.05.2016, 19:07

Ich nun ausgiebig herumexperimentiert, allerdings funktioniert das Beispiel auf jsfiddle.net bei mir nicht. Ich weiß, dass mir ohne Quellcode keine helfen kann, allerdings möchte ich nicht den gesamten Code offen legen (da es an allem möglichen liegen könnte). Ich bitte nur darum, dass mir jemand Beispiele nennen könnte, an denen es liegen könnte. Ich habe letzendlich den Code von Jsfiddle 1:1 kopiert und es funzt trotzdem nicht. Meine Vermutung ist, dass das Script/CSS-Teil von irgendetwas überschrieben wird. Daraufhin habe ich alles mit einem !important in der .css versetzt. Resultat = Es klappt nicht.

0

Ich bin mir nicht ganz sicher, aber CSS sollte ausreichen.

Sie oben fixieren, dass sie bleibt und eben Farbe ändern.

Mit freundlichen Grüßen
Reason-Scripting

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von Falke3434
21.05.2016, 21:47

Das wird nicht ausreichen, weil dieses Vorhaben komplett über Javascript laufen soll/wird.

Danke für die schnelle Hilfe,

Falke3434

0

Was möchtest Du wissen?