Sticky Header animierte lineare Hintergrundfarbe
Ich habe 100 Mal im Internet gesucht, um etwas zu finden, das so ist, was ich will. Ich habe nichts gefunden und habe es selbst versucht. Nach zwei Tagen gebe ich aus vielen Gründen auf. Also frage ich euch alle hier, ob jemand das für mich tun kann. Denken Sie an einen Sticks Header, scrollen Sie eine Website nach unten und der Header geht damit auf der Oberseite fixiert. So stelle ich mir vor, jedes Mal, wenn der Header einen Abschnitt mit data-color="#2D2D2D" erreicht, wird die Hintergrundfarbe des Headers geändert. Aber warte, ich möchte, dass es linear mit einem Hintergrundbild passiert, also wenn er zurück scrollt ist die Färbung linear auf die Farbe davor.
Hier ist der Artikel, den ich gesehen habe. Aber da ist es nur ein Bild und es ist im Inhalt. Ссылка
Hier ist mein Stift (Es war nur ein Versuch) Ссылка
Hier ist ein Bild
1 Antwort
Ich habe ein grundlegendes Beispiel für Ihre Bedürfnisse gemacht, schauen Sie es sich an und sagen Sie mir, ob ich verstanden habe, was Sie gesagt haben. Ich habe einige zusätzliche Erklärungen im js-Code hinzugefügt und die Geige ist am Ende dieses Beitrags.
Ein einfaches HTML-Markup
%Vor%Ich gehe für SCSS, aber Sie können leicht auf Basis-CSS aktualisieren (ich nahm an, dass der Sticky-Header standardmäßig ist, also habe ich einen Körper mit dem gleichen Wert wie die Headerhöhe hinzugefügt)
%Vor%Und der jQuery-Code.
%Vor%Sie können sehen, dass es in dieser Geige funktioniert. Ich würde einige Updates machen, aber ich bin etwas beschäftigt, aber ich empfehle Ihnen, mehr über jQuery debunce zu lesen und geben Sie eine versuchen Sie smart scroll (nützlich, um weniger Scroll-Ereignisse aufzurufen - gut für die Leistung)
Ich hoffe, was du suchst:)
Tags und Links javascript html jquery css jquery-effects