Elementor Header verstecken beim scrollen, anzeigen beim hoch-scrollen

Hier erfährst du wie du deinen Header, erstellt Elementor Pro, beim nach-unten-scrollen verschwinden lassen kannst und beim hoch-scrollen wieder angezeigt wird.

Mindesthöhe, Z-Index und Bewegungseffekt festlegen

Als erstes legst du einen Header in Elementor Pro an und gibst ihm im Tab “Layout” eine Mindesthöhe von z.B. 8 VH.

Dann wechselst du in den Tab “Erweitert”, dort vergibst du einen Z-Index von 199. Das gibt die Ebene des Headers an und stellt somit sicher, dass er über allen anderen Elementen auf der Webseite angezeigt wird.

Wichtig ist, dass du in den “Bewegungseffekten” den Header auf “Sticky: Oben” setzt.

Eigene CSS und HTML

In das Feld “CSS ID” trägst du “stickyheaders” ein.

Jetzt fügst du irgendwo in den Header das HTML-Widget von Elementor ein. In das HTML-Widget trägst du folgenden Code ein:

<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($) {
var mywindow = $(window);
var mypos = mywindow.scrollTop();
let scrolling = false; /* For throlling scroll event */
window.addEventListener('scroll', function() {
scrolling = true;
});
setInterval(() => {
if (scrolling) {
scrolling = false;
if (mypos > 40) {
if (mywindow.scrollTop() > mypos) {
$('#stickyheaders').addClass('headerup');
} else {
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
}
}, 50);
});
});

</script>
<style>
#stickyheaders{
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-9VH); /*adjust this value to the height or a little higher of your header*/
}
</style>

Bug fixing

Wenn der Header beim runter-scrollen nicht ganz verschwindet, stelle in dem eigenem CSS den translateY Wert eine kleinere Zahl ein -> -9VH zu -10VH.

weitere artikel

müde vom artikel lesen?

Schau dir meine Videos an!

du hast fragen zum thema?

Kontaktiere mich, ich helf dir weiter!