header position: fixed; padding-top des darunter liegenden Elements anpassen

[Gunnar Bittersmann]

@@djr

html {
	scroll-padding-top: 6rem;
}

Was es nicht alles gibt! Das ist ja einfach. –

Wenn man denn die Höhe des sticky headers kennt. Wenn sich die aber nach den Gegebenheiten beim Client (Viewportgröße, Schriftgröße, …) richtet (was nicht die schlechteste Idee ist!), dann muss man da doch mit JavaScript ran.

Das JavaScript muss aber nicht mehr tun als die Höhe des Headers auslesen und in eine custom property schreiben – initial und bei Änderung der Viewportgröße.

Und natürlich das position: sticky anschalten – das darf ja nur wirken, wenn das JavaScript läuft.

☞ Pen geforkt

😷 LLAP