Hallo zusammen,
anbei eine kleine Anleitung wie Ihr neben dem Standard Header einen zweiten schlankeren Header ab einer bestimmten Scroll Position fixiert einblenden lassen könnt. Bei vielen responsive Wordpress Themes findet man sowas.
Anmerkung das myPosY 110 steht dafür dass der 2. Header erst nach 110px Scrollhöhe eingeblendet wird.
<script>
jQuery(document).ready(function() {
var myPosY;
jQuery(window).bind( 'scroll', function() {
myPosY = jQuery(window).scrollTop();
if ( myPosY >= 110) {
jQuery('.header').removeClass('inactive');
jQuery('.header').fadeOut(3000);
jQuery('.small_header').fadeIn(3000);
}
else {
jQuery('.header').fadeIn(3000);
jQuery('.small_header').fadeOut(3000);
}
});
});
</script>
Beispiel CSS kann natürlich auch anders aussehen. Wichtig vor allem der z-index und das display none
.small_header {
width:100%; background:#fff; float:left; height:40px; color:#eee; position:fixed; z-index:999; top:0; display:none; box-shadow:-8px -8px 12px #000; left:0; padding:0px 0px 4px 0px; margin:0;
border-bottom:1px solid #ddd;}
Den Div für den neuen Header samt Inhalt könnt Ihr einfach vor dem üblichen Header einfügen.
<div class="small_header">Kleiner Header der erst beim scrollen sobald der Standardheader verschwindet sichbar ist und oben fixiert bleibt, mit z. B. kleinem Logo, Navigation und Warenkorb als Icon. Kann alternativ auch für was anderes eingesetzt werden z. B. eine Botschaft oder irgendeine Information welche Ihr Sichtbar haben wollt wenn der Standardheader durch scrollen verschwindet</div>
<div class="header">Standardheader mit Logo, Navigation, Warenkorb, Anmelden, Abmelden, usw.. höhe z. B. 150px</div>
