@@Jensen

Habe es versucht und es hat tatsächlich im Edge und Chrome funktioniert. Leider läuft es im Firefox nicht

Wie in Kommentaren in meinem Beispiel steht, läuft es bereits im Firefox mit gesetztem Feature-Flag. Laut Can I Use ist auch für die nächsten Releases noch nicht geplant, das allgemein freizuschalten.

dazu ist ein Polyfill notwendig

Nö. Notwendig ist die Verkleinerung des Headers nicht. Du kannst das getrost als progressive enhancement ansehen und nur in Browsern machen, die scroll-driven animinations unterstützen.

Oder du kuckst dir auf meinen Star-Trek-Seiten ab, wie ich die Linie unterm Header anzeigen/verschwinden lasse: per IntersectionObserver wird dem body eine Klasse "scrolled" verpasst bzw. weggenommen. Observiert wird dabei der head – wenn er schon mal da ist, braucht man kein zusätzliches Element.

Vorgestellt habe ich das u.a. auf der Jam Session der Smashing Conference Freiburg 2022, siehe insb. Slides 12 und 13.

Font Awesome Icons werden z. B nicht dargestellt...

Du verwendest die Icons aber hoffentlich nicht als Webfont, oder?

Kwakoni Yiquan