Shrinking Header, Idee Schritt 1

[Camping_RIDER]

Aloha ;)

Das leistet schon mal einen Großteil von dem, was Lukas haben wollte. Zumindest zeigt es einen Weg auf, wie man es erreichen kann.

Du verwendest immer noch JavaScript um visuelle Details umzuschalten, machst die Animation also "zu Fuß" und dadurch, dass...

Dass man allerdings nochmal über einen oder zwei Schalter nachdenken sollte, der regelt, dass die Funktionen, die der Scroll-Handler ausführen soll, nur dann anspringen, wenn sie auch gebraucht werden, bleibt als Aufgabe.

...das in deiner Lösung nicht vorkommt wird jedesmal der gesamte Code für die Änderungen ausgeführt. Dein System lacht vermutlich darüber - ein älteres Smartphone eher nicht. Vor allem dann nicht, wenn jedes visuelle Detail extra mit einem JS-Aufruf umgeschaltet wird.

Die Devise sollte sein: JavaScript protokolliert die Änderung, da das mit CSS nicht möglich ist (das verbraucht nur sehr überschaubar performance), CSS reagiert auf die Veränderung mit visueller Anpassung.

Das nutzt alle Performance-Vorteile optimal aus. - Immerhin ist die Browserengine auch daraufhin optimiert, Animationen / Transitions mit CSS umzusetzen, während das zu-Fuß-Realisieren einer Animation im Vergleich teuer sein sollte (bei jeder Änderung, die JS auslöst, muss die Browserengine die Darstellung anpassen und das gesamte Programm, das bei CSS-Veränderung abgespult werden muss, muss durchlaufen während das innerhalb einer CSS-Animation schätzungsweise optimiert stattfindet, da der CSS-Teil der Engine nur auf interne Impulse und nicht auf unvorhersehbare externe Vorgaben aus dem JS-Teil reagieren muss).

Grüße,

RIDER