Lesefortschritt:

Menu-Special #8: Header der Website beim Scrollen mit einem Trennstrich vom Content abgrenzen

24. Juli 2024 | CSS-Stylesheet, Divi-Theme, Scripts

Dieser Beitrag beinhaltet 796 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

Vor allem bei einfarbigen Websites mit fixiertem Header kann das Scrollen der Anzeige dazu führen, dass der Inhalt plötzlich hinter der Navigation verschwindet. Mir gefällt das nicht sonderlich. Bei einigen meiner realisierten Webprojekte setze ich darum eine Trennlinie, welche den Header vom Content abtrennt – gerne auch eine Linie, welche erst beim Scrollen erscheint. Das ist gar nicht mal so schwierig umzusetzen.

Zunächst müssen Sie den Inhalt vorbereiten, welcher mit einer Trennlinie versehen werden soll. In meinem Fall, ist das beispielsweise eine Divi-Zeile (Row).

  • Dieser Zeile vergebe ich zunächst eine CSS-Klasse namens «border-header». Diesen Klassennamen können Sie bei bearbeitetem Element im Tab «Erweitert», «CSS-ID und Klassen» im Textfeld «CSS-Klassen» einfügen.
  • 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.

Und schliesslich benötigen Sie ein kleines Script, wie Sie es in der Folge finden. Kopieren Sie es in den <head>-Bereich Ihrer Website – im Backend unter Divi/Theme-Optionen/Integration:

<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 10) {
jQuery(".border-header").addClass("border-fixed-header");
}
else{
jQuery(".border-header").removeClass("border-fixed-header");
}
});
});
</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 ganz nach oben scrollt.

Auf Zeile 5 können Sie festlegen, wie weit gescrollt werden soll, bevor die Aktion passiert – in meinem Beispiel sind das 10 Pixel.

Nun benötigen Sie noch etwas CSS-Code, der festlegt, wie die Trennlinie aussehen soll. Sie finden ihn in der Folge. Kopieren Sie ihn und fügen Sie diesen ins CSS-Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzliches CSS:

.border-header {
	border-bottom: 5px solid transparent !important;
	-webkit-transition: border-bottom 1s ease-out;
	-moz-transition: border-bottom 1s ease-out;
	-o-transition: border-bottom 1s ease-out;
	transition: border-bottom 1s ease-out;
}
.border-fixed-header {
	border-bottom: 5px solid #000095 !important;
	-webkit-transition: border-bottom 1s ease-out;
	-moz-transition: border-bottom 1s ease-out;
	-o-transition: border-bottom 1s ease-out;
	transition: border-bottom 1s ease-out;
}

Die Farben und die Breite der Trennlinie (alles auf den Zeilen 2 und 9) können Sie nach eigenem Gusto anpassen. Ebenso die Animationsdauer, welche bei mir eine Sekunde dauert. Diese bewirkt, dass die Trennlinie nicht abrupt erscheint, sondern sanft ein- und ausfadet.

Das Resultat des Hacks sehen Sie im Screenshot nebenan. Beim Laden der Seite gibt es zunächst keine Trennlinie zum Inhalt:

Nach ein wenig Scrollen – in meinem Fall sind es 10 Pixel – wird die Trennlinie angezeigt.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This