Sticky Header on scroll in Elementor

In diesem Artikel zeige ich dir, wie man einen sticky Header in Elementor erst erscheinen lässt, sobald man nach unten scrollt.

Füge diesen Code in deiner Webseite ein (entweder unter Individueller Code oder als html widget)

<style>
#stickyheader {
    transition: transform 0.34s ease;
    position: fixed;
    top: 0;
    width: 100%;
}

.headerup {
    transform: translateY(-110px); /* Versteckt den Header nach oben */
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($) {
        var mywindow = $(window);
        var mypos = mywindow.scrollTop();
        let scrolling = false;

        window.addEventListener('scroll', function() {
            scrolling = true;
        });

        setInterval(() => {
            if (scrolling) {
                scrolling = false;
                const triggerPoint = window.innerHeight * 0.8; // 80vh
                const currentScroll = mywindow.scrollTop();

                if (currentScroll >= triggerPoint) {
                    $('#stickyheader').removeClass('headerup'); // Einblenden ab 80vh
                } else if (currentScroll < triggerPoint && mypos >= triggerPoint) {
                    $('#stickyheader').addClass('headerup'); // Ausblenden nur, wenn von über 80vh nach unter 80vh gescrollt wird
                }
                mypos = currentScroll;
            }
        }, 300);
    });
});
</script>

Um die Position, wann der Header eingeblendet wird, einzustellen kannst du die Werte im Code anpassen. Schau dir dazu auch gerne das Video an!