Shrinking Header, Idee Schritt 1

[Camping_RIDER]

Aloha ;)

Vielleicht noch was zur Performance-Problematik. Vergleich mal deinen JS-Ansatz

$(window).scroll( 
  function() 
  {   
    $("footer").text('DocHeight = '+$(document).height()+', ScrollTop = '+$(window).scrollTop() );
    if($(window).scrollTop() > 200) 
    {
      // deine Aktionen 
      setHeaderHeight(100);
      // $( "section#Sec02" ).text('Hallo');
    }
    else if ($(window).scrollTop() < 120) 
    {    
      setHeaderHeight(200);
      // $( "section#Sec02" ).text('Selber Hallo');
    } 

  }
);

mit meinem.

Hier muss bei jedem Scroll-Vorgang alles was an Anweisungen passieren kann auch ausgeführt werden (da mindestens if oder else if fast immer ausgeführt werden) - und das obwohl eigentlich nur in genau einem Fall eine tatsächliche Änderung stattfindet - nämlich dann, wenn der Scroll-Zustand nicht zum aktuellen visuellen Zustand passt. Im vorliegenden Beispiel sind das nur zwei Anweisungen je Scrollvorgang. Bei mehr gewünschten Effekten wird das aber stark wachsen - die Lösung skaliert also nicht.

In meiner Lösung bzw. dem, was auf der vorliegenden Seite eingesetzt wird, wird bei den allermeisten Scroll-Vorgängen ausschließlich mit zwei Wertabfragen geprüft, ob eine Aktion notwendig ist, und falls nein überhaupt nichts getan. Das ist performancetechnisch sehr viel sicherer als das Ausführen der Anweisungen ohne Wenn und Aber und dadurch, dass im Resultat nur eine Klasse umgeschaltet wird während die Effekte im CSS geschehen ist sichergestellt, dass die Lösung auch bei mehr Effekten noch fast mit der selben Performance arbeitet, sie skaliert also vergleichsweise gut.

Grüße,

RIDER