menu 隨著scroll高度跳出

Question

<div id="A" class="menu">
</div>

<div id="B" class="menu">
這個menu先display none
</div>

假設我有一個menu
如何當捲軸往下移動時
menu能夠fixed在最上面？

我現在的做法是有兩個menu div
當一開始進入時顯示A menu
當往下滑時顯示B menu

$(document).ready(function(){
  $(window).scroll(function(){    if($(this).scrollTop()>1)
    {
      $("#B").fadeIn();
    }    else if($(this).scrollTop()<1)
    {
      $("#B").fadeOut();
    }
    });
});

就是：
https://santatracker.google.c...
進入這個網頁後
往下滑動，上面的menu會出現且fixed
不過我必須要做兩個menu才可以實現這個效果
如何在「同一個」menu就可以做到這個效果呢？？