zeigen verschiedene Header auf Scrollen dann ausblenden, wenn nach oben scrollte Javascript/JQuery

Question

Dies macht mich verrückt, weil ich es funktionierte, und jetzt ist es nicht, ich habe 2 Header und wenn die Seite lädt, ich will, dass einer versteckt werden ist einfach genug, sobald der Benutzer scrollt ich will den anderen Header, um darüber zu zeigen und dann, wenn sie zurück nach oben scrollen die Original-Header zeigt.

Ich denke, es gibt ein Problem mit dem window.pageyoffset denn was auch immer ich in diese setzen if-Anweisung es nicht ausführt ..

<script> 

    var secondHeader = $('.headerN').hide(); 

    function testScroll(){ 
     if(window.pageYOffset>50){ 
      secondHeader.fadeIn(); 
     } 
     else if(window.pageYOffset == 0){ 
      secondHeader.fadeOut(); 
     } 
    } 
    window.onscroll=testScroll; 

Answer 1

Versuchen unter Code.

$(window).scroll(function() { 

      if ($(this).scrollTop() > 50) { 

       $('.headerN').fadeIn(); 
      } else { 
       $('.headerN').fadeOut(); 
      } 
}); 

Answer 2

Dies ist, was Sie brauchen:

$("#header-scroll").hide(); 
 
$(window).scroll(function() { 
 
    if ($(this).scrollTop() > 10) { 
 
    $('#header-scroll').slideDown(500); 
 
    $('#header-full').slideUp(500); 
 
    } else { 
 
    $('#header-scroll').slideUp(500); 
 
    $('#header-full').slideDown(500); 
 
    } 
 
});

.header { 
 
    border: 2px #3a3a3a solid; 
 
    width: 97%; 
 
    position: fixed; 
 
    text-align:center; 
 
    color: #3a3a3a; 
 
    top: 0px; 
 
} 
 
#header-full { 
 
    height: 100px; 
 
    background-color: #FFF056; 
 
    font-size:72px; 
 
} 
 
#header-scroll { 
 
    height: 50px; 
 
    background-color: #CBE32D; 
 
    font-size:28px; 
 
} 
 
#content { 
 
    height: 600px; 
 
    width: 97%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header-full" class="header"> 
 
    Full Header 
 
</div> 
 
<div id="header-scroll" class="header"> 
 
    Scroll Header 
 
</div> 
 
<div id="content"></div>