Eine Kopfzeile, die beim Runterscrollen verschwindet und beim Hochscrollen wieder auftaucht, schafft Platz zum Lesen und ist trotzdem sofort da, wenn man zurück zur Navigation will. Viele Seiten machen das so. In Divi 5 gibt es dafür allerdings keine fertige Einstellung, du brauchst einen kleinen Umweg.
Ich zeige dir den Umweg, den ich auf einer Testseite gebaut und live geprüft habe: die Standard-Funktion „Klebrige Position“ plus ein kurzes Stück Code in einem Code-Modul. Du brauchst dafür keine Programmierkenntnisse, nur einmal Kopieren und Einfügen. Die Kopfzeile selbst baust du im Theme Builder, das erkläre ich in Globale Kopfzeile bauen und Divi-Header anpassen.
Getestet mit Divi 5.13 (deutsche Oberfläche), Stand Oktober 2026.
Was Divi 5 nicht kann
Ich habe die naheliegenden Stellen durchsucht. Im Theme Builder öffnest du dazu die Sektion deiner Kopfzeile und gehst auf den Reiter „Erweitert“. Dort gibt es die Gruppen „Interaktionen“, „Sichtbarkeit“, „Übergänge“ und „Scroll-Effekte“. Unter „Interaktionen“ legst du mit „Interaktion Hinzufügen“ einen Auslöser fest. Zur Wahl stehen:
- „Klick“,
- „Mauszeiger Eintritt“ und „Maus Verlassen“,
- „Viewport Betreten“ und „Viewport Verlassen“,
- „Laden“,
- „Breakpoint Betreten“ und „Breakpoint Verlassen“.
Die Auslöser der Interaktionen: Eine Scrollrichtung ist nicht dabei.Auf die Richtung des Scrollens reagiert keiner davon. Auch unter „Scroll-Effekte“ findest du nur die „Klebrige Position“ und die „Scroll-Transformationseffekte“, aber keinen Schalter „beim Runterscrollen ausblenden“. Ich schreibe das so deutlich, weil viele ältere Anleitungen so tun, als gäbe es das. Für Divi 5 stimmt das nicht.
Schritt 1: Kopfzeile fixieren
Zuerst soll die Kopfzeile beim Scrollen am oberen Rand haften. Wähle im Theme Builder-Layout deine Sektion, dann Erweitert → „Scroll-Effekte“ → „Klebrige Position“ und stell die Auswahl von „Nicht kleben“ auf „Bleiben Sie oben“.
„Bleiben Sie oben“ heftet die Sektion an den oberen Rand.Gib der Sektion außerdem unter „Inhalt“ → „Hintergrund“ eine Hintergrundfarbe, zum Beispiel #ffffff. Sonst scheint beim Scrollen der Seiteninhalt durch die fixierte Kopfzeile.
Schritt 2: Das Code-Modul einsetzen
Füge in eine Spalte deiner Kopfzeile ein Code-Modul ein. Es zeigt auf der Seite nichts an, deshalb stört eine leere Spalte nicht. Ich habe es in eine dritte, sonst leere Spalte der Kopfzeile gesetzt. Klick ins Feld „Code“ und füge diesen Code ein:
<style>
.et-l--header .et_pb_section { transition: transform .3s ease; }
.et-l--header .et_pb_section.kopf-weg { transform: translateY(-100%) !important; }
</style>
<script>
(function () {
var h = document.querySelector(".et-l--header .et_pb_section");
var y = window.scrollY;
if (!h) { return; }
window.addEventListener("scroll", function () {
var n = window.scrollY;
if (n > y && n > 150) { h.classList.add("kopf-weg"); }
else if (n < y) { h.classList.remove("kopf-weg"); }
y = n;
}, { passive: true });
})();
</script>
Das Code-Modul mit dem eingefügten Code.Was der Code macht, in einfachen Worten: Er merkt sich, wie weit du gescrollt hast. Scrollst du nach unten und bist schon mehr als 150 Pixel von oben weg, bekommt die Kopfzeile die Klasse „kopf-weg“, und das CSS schiebt sie um ihre eigene Höhe nach oben aus dem Bild. Scrollst du nach oben, nimmt er die Klasse wieder weg. Die Zahl 150 kannst du ändern: Je kleiner, desto früher verschwindet die Kopfzeile.
Zwei Hinweise aus dem Test. Das Skript läuft nur auf der echten Seite, nicht im Visual Builder, und du siehst den Effekt dort also nicht. Und es greift sich die erste Sektion der Kopfzeile. Hast du mehrere Sektionen (zum Beispiel eine Infoleiste und darunter die Navigation), schaltet der Code nur die erste um. Pack dann alles in eine Sektion.
Schritt 3: Speichern und prüfen
Klick auf „Speichern“, dann auf „Beenden“ und im Theme Builder auf „Änderungen Speichern“. Danach ruf die Seite ausgeloggt auf, in einem privaten Fenster oder mit geleertem Cache. Auf meiner Testseite sah das so aus:
Am Seitenanfang steht die Kopfzeile ganz normal oben.
Nach dem Herunterscrollen ist sie aus dem Bild geschoben.
Schon ein kleines Stück nach oben genügt, und sie ist wieder da.Zum Nachmessen habe ich beim Test die Werte der Sektion ausgelesen: Ganz oben stand die Kopfzeile bei 0 Pixel. Nach 500 Pixeln Scrollen lag sie 132 Pixel über dem Bildrand (ihre eigene Höhe), und nach 120 Pixeln zurück stand sie wieder bei 0.
Wenn es nicht klappt
- Nichts passiert: Prüf, ob „Klebrige Position“ wirklich auf „Bleiben Sie oben“ steht und ob die Seite aus dem Cache kommt.
- Die Kopfzeile verschwindet nie: Dann findet das Skript die Sektion nicht. Das passiert, wenn dein Header nicht aus dem Theme Builder stammt, sondern der eingebaute von Divi ist. Der Code ist nur für den Theme-Builder-Header gedacht.
Den Theme Builder bekommst du mit Divi, die Mitgliedschaft gibt es bei Elegant Themes (Werbung).
Häufige Fragen
Geht das ohne Code?
In Divi 5.13 nach meiner Prüfung nicht. Die Interaktionen reagieren nicht auf die Scrollrichtung, die Sticky-Einstellung kennt nur „Bleiben Sie oben“ und „unten“.
Funktioniert das auch auf dem Handy?
Das Skript reagiert auf jedes Scrollen, also auch auf dem Handy. Ich habe es dort allerdings nicht getestet, prüf es also auf deinem eigenen Gerät.
Kann ich die Geschwindigkeit ändern?
Ja, im CSS steht .3s. Größere Werte machen die Bewegung langsamer.
