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... > ~~~js > $(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](https://forum.selfhtml.org/self/2017/mar/2/navileiste-soll-sich-beim-scrollen-verfaerben/1688757#m1688757) > 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](http://codepen.io/Camping_RIDER/pen/KWBeOb) 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](http://codepen.io/Camping_RIDER/pen/NpBBWL) geforked, der einen besseren visuellen Eindruck macht und komplett ohne Javascript auskommt. Die Essenz davon ist: ~~~css 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`{: .language-js} zu horchen. Grüße, RIDER -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller # [Twitter](https://twitter.com/Camping_RIDER) # [Steam](http://steamcommunity.com/id/Camping_RIDER) # [YouTube](https://www.youtube.com/user/RidersFlame) # [Self-Wiki](http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER) # [Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[

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... > ~~~js > $(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](https://forum.selfhtml.org/self/2017/mar/2/navileiste-soll-sich-beim-scrollen-verfaerben/1688757#m1688757) > 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](http://codepen.io/Camping_RIDER/pen/KWBeOb) 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](http://codepen.io/Camping_RIDER/pen/NpBBWL) geforked, der einen besseren visuellen Eindruck macht und komplett ohne Javascript auskommt. Die Essenz davon ist: ~~~css 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`{: .language-js} zu horchen. Grüße, RIDER -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller # [Twitter](https://twitter.com/Camping_RIDER) # [Steam](http://steamcommunity.com/id/Camping_RIDER) # [YouTube](https://www.youtube.com/user/RidersFlame) # [Self-Wiki](http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER) # [Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[