Ausgangssituation
Header (sticky)
├─ header_top (Shop, Konto, Login, Warenkorb)
├─ Trenner
└─ shrink-header
├─ Logo
└─ Hauptmenü
Der komplette Header ist per Elementor auf Sticky → Top gesetzt.
Nur der untere Bereich (shrink-header) soll beim Scrollen kleiner werden.
JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('.shrink-header');
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 {
transition:
min-height 0.3s ease,
box-shadow 0.3s ease,
backdrop-filter 0.3s ease;
min-height: 90px;
}
/* LOGO */
.shrink-header .header-logo img {
transition: transform 0.3s ease;
transform: scale(1);
transform-origin: left center;
}
/* 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);
}
Problem: Weißer Streifen unter dem Header
Symptom
Beim Zurückscrollen nach oben erscheint für einen kurzen Moment ein weißer Streifen unter dem Header.
Die Höhe des Streifens entspricht exakt der Differenz zwischen der Normalhöhe und der Shrink-Höhe des Headers.
90px → 70px
= 20px sichtbarer Streifen
Falsche Verdächtige
Folgende Punkte waren nicht die Ursache:
- backdrop-filter
- box-shadow
- Hintergrundfarbe des Headers
- Hintergrundfarbe des Sticky-Spacers
- z-index
- Logo-Skalierung
- Browser-Zoom
- min-height selbst
Tatsächliche Ursache
Elementor verwendet bei Sticky-Containern einen unsichtbaren Platzhalter:
<div class="elementor-sticky__spacer"></div>
Beim Zurückscrollen passiert Folgendes:
1. Der Elementor-Spacer springt sofort auf die neue Höhe.
2. Der Seiteninhalt wird sofort nach unten verschoben.
3. Der Header animiert aber noch 0,3 Sekunden.
4. Während dieser Zeit wird der obere Rand des Seiteninhalts sichtbar.
Wichtig:
Der sichtbare Streifen ist nicht der Spacer.
Der Streifen ist der Hintergrund des ersten Containers unter dem Header.
Warum tritt das nur manchmal auf?
Auf funktionierenden Projekten:
Sticky-Container
└─ schrumpft selbst
Auf problematischen Projekten:
Sticky-Container
└─ enthält einen schrumpfenden Untercontainer
Dadurch laufen Spacer und Animation auseinander.
Diagnose
Dem ersten Container unter dem Header im Inspector testweise eine auffällige Hintergrundfarbe geben:
background: lime !important;
Wird der Streifen grün, stammt er von diesem Container.
Praktische Lösung
Den ersten Seitencontainer bzw. die Hero leicht nach oben verschieben:
.elementor[data-elementor-type="wp-page"] {
transform: translateY(-20px);
}
Alternativ:
.elementor[data-elementor-type="wp-page"] {
margin-top: -20px;
}
Dadurch überdeckt die Hero den kurz sichtbaren Bereich.
Optisch bleibt die Seite unverändert, der weiße Streifen verschwindet.
Merksatz für zukünftige Projekte
Problematisch:
Sticky Header
└─ Untercontainer schrumpft
Unproblematisch:
Sticky Header
└─ Sticky-Container schrumpft selbst
Wenn möglich, immer das Sticky-Element selbst animieren.
Falls das Layout das verhindert (z. B. Shop-Leiste über dem Menü), lässt sich der Effekt zuverlässig durch ein leicht nach oben verschobenes Hero-Element kaschieren.