スクロールで別のヘッダーを表示してからスクロールするときに非表示にするjavascript/JQuery

Question

これは私がうまく動いていて、今はそうではなく、2つのヘッダーがあり、ページが読み込まれるときに、ユーザーがスクロールするとすぐに他のヘッダーが表示され、元のヘッダーが上にスクロールすると、すぐにそのメッセージが表示されます。

私は、コードの下に使用してみてください

<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

...今まで私は文の場合、この内側に置く何が実行されないためwindow.pageyoffsetとの問題があると思います。

$(window).scroll(function() { 

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

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

Answer 2

これは、何が必要です：

$("#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>