Shrinking Header, Idee Schritt 1

[Camping_RIDER]

Aloha ;)

ich habe mal 'was gebastelt. Da fallen zwar garantiert gleich wieder Einige mit nebensächlichen Verwässerungsvorschlägen (sic!) drüber her, aber das muss ich dann eben aushalten ;-P

Aber gerne doch 😝

Wie verträgt sich...

$(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 dem neulich von @Gunnar Bittersmann formulierten Grundsatz

Aufs scroll-Event reagieren (das etliche Male pro Sekunde feuert), ist nichts, was man tun möchte, wenn man nicht muss.

Mein Gefühl sagt eher nicht so, aber ich mag mich täuschen.

Ich hab das mal in einem Pen nachgebaut und finde, dass das eher irritiert - zusätzlich zum Performance-Debakel. Der Header springt irgendwann auf eine kleinere Größe um, das ist nicht grad toll.

Ich hab mal einen Alternativvorschlag geforked, der einen besseren visuellen Eindruck macht und komplett ohne Javascript auskommt. Die Essenz davon ist:

body {
  margin-top:200px;
  background-color:white;
}

html {
  background-color:#AAAAAA;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 20pt;
  height: 100px;
  background-color: #AAAAAA;
}

Das ist nur eine von mehreren Möglichkeiten, wie man das mit reinem CSS umsetzen kann und sie sind vermutlich fast alle besser als mit JavaScript auf eine Änderung bei scroll zu horchen.

Grüße,

RIDER