Zur Übersicht

Elementor Shrink Header – Sticky und Shrink auf demselben Container

Idealer Aufbau

shrink-header (sticky)
├─ Logo
└─ Hauptmenü

Bei diesem Aufbau ist der Container, der sticky ist, auch derselbe Container, der beim Scrollen schrumpft.

Das ist die sauberste Variante, weil Elementor den Sticky-Spacer für genau das Element berechnet, dessen Höhe sich verändert.

JavaScript

<script>
document.addEventListener('DOMContentLoaded', function() {

    const header = document.querySelector('.shrink-header');

    if (!header) {
        return;
    }

    function updateHeader() {
        if (window.scrollY > 80) {
            header.classList.add('shrink-active');
        } else {
            header.classList.remove('shrink-active');
        }
    }

    updateHeader();
    window.addEventListener('scroll', updateHeader);

});
</script>

CSS

/* HEADER NORMAL */
.shrink-header {
    min-height: 90px;

    transition:
        min-height 0.3s ease,
        box-shadow 0.3s ease,
        backdrop-filter 0.3s ease;
}

/* LOGO */
.shrink-header .header-logo img {
    transform: scale(1);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

/* HEADER BEIM SCROLLEN */
.shrink-header.shrink-active {
    min-height: 70px;

    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* LOGO KLEINER */
.shrink-header.shrink-active .header-logo img {
    transform: scale(0.8);
}

Elementor-Einstellung

Der Container .shrink-header wird direkt in Elementor auf sticky gesetzt:

Erweitert
→ Motion Effects
→ Sticky: Top

Wichtig: Nicht ein übergeordneter Header-Container, sondern wirklich der Container mit der Klasse shrink-header.

Warum diese Variante stabil ist

Elementor erzeugt bei Sticky-Containern einen Platzhalter:

<div class="elementor-sticky__spacer"></div>

Wenn Sticky-Container und Shrink-Container identisch sind, passen Spacer-Höhe und Header-Höhe zusammen.

Dadurch entsteht kein weißer Streifen unter dem Header.

Merksatz

Gut:
Sticky-Container = Shrink-Container

Problematisch:
Sticky-Container enthält nur einen schrumpfenden Untercontainer. Wenn möglich, immer das Sticky-Element selbst schrumpfen lassen.

Falls aus irgendeinem Grund der innere Container schrumpfen muss, gibt es hier die Lösung.