Shrinking Header, Idee Schritt 1

[TS]

Hello,

Aber vielleicht kann mir hier jemand sagen, wie ich innerhalb der Closure eine static Var anlegen kann, die beim ersten Aufruf gefüllt wird und dann bei jedem weiteren Aufruf wieder zur Verfügung steht?

Ich habe das jetzt so gelöst. Ob es richtig™️ ist, weiß ich nicht, aber es funktioniert.

                function setHeaderHeight(height)
                {
                    if (!this.fsize) this.fsize = $( "header h1" ).css("font-size");
                    if (!this.hheight) this.hheight = $( "header" ).height();

                    $( "header" ).height(height);

                    var newfsize = (parseInt(fsize) * height / hheight) + 'px';
                    $( 'header h1' ).css( { 'font-size':newfsize} );
                }

und das CSS habe ich so geändert:

	header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 0 20pt;
            height: 200px;
            background-color: #AAAAAA;
            transition: height 2s;
	}
        
        header h1 {
            font-size: 40pt;
            transition: font-size 2s;
        }

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

Ob der scroll()-Event-Listener selbst nun so besonders teuer ist, vermag ich nicht zu sagen. Eine merkliche Systemlaststeigerung kann ich nicht feststellen dadurch. Vermutlich lacht das System darüber.

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.

Liebe Grüße
Tom S.