Trick # 364 | Dieser Beitrag beinhaltet 776 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Mit dem Menü-Modul des Divi-Themes können Sie auch ganz einfach einen Farbwechsel des Navigationshintergrunds auslösen. Etwa nach einer bestimmten Scrollhöhe. Wie simpel das ist, zeigen wir Ihnen hier.
Ein Menü in dieser Art werden wir mit dem heutigen Hack erreichen – Scrollen Sie etwas nach unten (und wieder nach oben) um den Farbwechsel festzustellen:
Dazu benötigen Sie einen vorbereitenden Schritt – möglicherweise noch einen zweiten:
- Setzen Sie das Menü-Modul zunächst in eine eigene Divi-Zeile und vergeben Sie dieser Zeile eine CSS-Klasse namens «change-header-color». Diesen Klassennamen können Sie bei bearbeitetem Element im Tab «Erweitert», «CSS-ID und Klassen» im Textfeld «CSS-Klassen» einfügen.
Das Menü soll möglicherweise beim Scrollen auch gleich am oberen Bildschirmrand haften bleiben. Das lösen Sie wie folgt: Ebenfalls im Tab «Erweitert» finden Sie etwas weiter unten die «Scroll Effects» – dort können Sie den Inhalt als «Stick to Top» festlegen, damit das Element beim Scrollen nicht aus dem Blickfeld verschwindet.
Danach kopieren Sie das folgende Script und fügen es in den <head>-Bereich Ihrer Website ein. Diesen Bereich können Sie im Backend unter Divi/Theme-Optionen/Integration bearbeiten:
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 100) {
jQuery(".change-header-color").addClass(".change-fixed-header-color");
}
else{
jQuery(".change-header-color").removeClass(".change-fixed-header-color");
}
});
});
</script>Das Script legt fest, dass dem angepeilten Divi-Element beim Scrollen eine weitere CSS-Klasse hinzugefügt wird. Diese Klasse wird wieder entfernt, sobald man auf der Seite wieder nach oben scrollt.
Auf Zeile 5 können Sie festlegen, wie weit gescrollt werden soll, bevor die Aktion passiert – in unserem Beispiel sind das 100 Pixel.
In der Folge benötigen Sie noch etwas CSS-Code, den Sie ins CSS-Stylesheet unter Design/Customizer/Zusätzliches CSS einfügen können:
.change-header-color {
background: transparent;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.change-fixed-header-color {
background-color: #59B14B!important;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}Die Farben können Sie nach eigenem Gusto auf den Zeilen 2 und 10 anpassen. Ebenso die Animationsdauer, welche im vorliegenden Beispiel 2 Sekunden dauert. Diese bewirkt, dass die Hintergrundfarbe nicht abrupt wechselt.
Werbung
Bilder-Special – Trick #5: Coole 3D-Flip-Cards ganz einfach in HTML erstellen – komplett ohne Plugin
Werbung
