Trick # 371 | Dieser Beitrag beinhaltet 1051 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Manchmal kann es hilfreich sein, wenn die Navigation der Website beim Scrollen etwas geschrumpft wird. Sie «klebt dann beispielsweise ganz oben an der Seite – nimmt dort aber etwas weniger Platz ein. Das geht ganz einfach mit einem Script und etwas CSS-Code.
Das Menü, das wir schrumpfen lassen wollen könnte etwa so aussehen wie das folgende. Scrollen Sie ein wenig hoch und runter, damit Sie den Effekt sehen.
Um diesen Effekt zu erzielen, muss dem Menü-Modul eine CSS-Klasse zugewiesen werden. Wir verwenden hier den Klassennamen «shrink-header», den Sie im Tab «Erweitert» des Menü-Moduls unter «CSS-ID & Klassen» im Textfeld «CSS-Klasse» eintragen können.
Auch werden Sie das Menü vermutlich am Seitenkopf fixieren wollen, wenn Sie scrollen. Dies können Sie etwas weiter unten im Tab «Erweitert» einstellen: Unter «Scroll Effects» den Punkt «Stick To Top» auswählen.
Danach benötigen Sie das folgende Script, welches Sie in den <head>-Bereich Ihrer Website setzen können. Dieses finden Sie im Backend unter Divi/Theme-Optionen/Integration:
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 100) {
jQuery(".shrink-header").addClass("shrink-fixed-header");
}
else{
jQuery(".shrink-header").removeClass("shrink-fixed-header");
}
});
});
</script>Das Script aktiviert den Schrumpfeffekt nach einer Scrolldistanz von 100 Pixeln. Wenn Sie möchten, können Sie diesen Wert auf Zeile 5 anpassen.
Nun folgt noch ein Stück CSS-Code. Diesen können Sie im CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS deponieren:
/* Zeitdauer der Animation des Menüs festlegen */
.shrink-header .et_pb_row {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* Inneren Zwischenraum des fixierten Menüs festlegen */
.shrink-fixed-header .et_pb_row {
padding: 0px 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* Zeitdauer der Animation des Logos festlegen */
.shrink-header .et_pb_menu__logo img {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* Zielgrösse des Logos festlegen */
.shrink-fixed-header .et_pb_menu__logo img {
max-width: 80%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* Zeitdauer der Animation der Menü-Schriftgrösse festlegen */
.shrink-header .et_pb_menu ul li a {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* Zielgrösse der Menü-Schriftart festlegen */
.shrink-fixed-header .et_pb_menu ul li a {
font-size: 16px!important;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}Aber natürlich: Die Werte können Sie einfach anpassen. Die Animationen sind in diesem Beispiel alle auf .5s gestellt, was einer halben Sekunde entspricht.
Werbung
Werbung
