Hide on Scroll Header
Scrolle nach unten — der Header verschwindet. Scrolle zurück nach oben — er erscheint wieder. Technisch realisiert mit position: fixed, transform: translateY(-100%)und Body-Padding-Ausgleich.
Scrolle nach unten — der Header verschwindet. Scrolle zurück nach oben — er erscheint wieder. Technisch realisiert mit position: fixed, transform: translateY(-100%)und Body-Padding-Ausgleich.
Der Header nutzt position: fixed statt sticky, damit er aus dem Dokumentfluss entfernt werden kann. JavaScript misst nach dem Laden die Header-Höhe und setzt document.body.style.paddingTop entsprechend, um Layout-Sprünge zu vermeiden.
Die Scroll-Richtung wird mit requestAnimationFrame ermittelt. Ein Schwellwert von 80px verhindert versehentliches Ausblenden bei kleinen Scroll-Bewegungen am Seitenanfang.
Für Seiten, bei denen der Inhalt im Vordergrund stehen soll und der Header mehr Platz für den Inhalt freigeben darf. Ideal für lange Artikel, Dokumentationsseiten oder Portfolio-Seiten.
Der Header kehrt beim Hochscrollen sofort zurück, so dass Navigation jederzeit erreichbar bleibt.
position: fixed — nicht stickytransition: transform 0.3s ease für weiche AnimationResizeObserver — passt sich dynamisch anpassive: true für Performancedocument.querySelectordata-testid="header-hide-on-scroll" für E2E-Tests