jQueryでスクロールしても上に固定されるメニュー

サンプルとコードはこちらで紹介されています。

<script type="text/javascript">
  $(function() {
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        if(scrollTop != 0)
          $('#nav').stop().animate({'opacity':'0.5'},400); //スクロール時
        else 
          $('#nav').stop().animate({'opacity':'1'},400); //一番上にあるとき
      });

     $('#nav').hover(
       function (e) {
        var scrollTop = $(window).scrollTop();
        if(scrollTop != 0){
          $('#nav').stop().animate({'opacity':'1'},400); //オンマウス時
        }
      },
       function (e) {
        var scrollTop = $(window).scrollTop();
        if(scrollTop != 0){
          $('#nav').stop().animate({'opacity':'0.5'},400); //マウスアウト時
        }
      }
    );
  });
</script>

コメントしているところは以下のようになっていますので変更可能です。

不透明なんかは好みが分かれるところだと思いますので、不透明をなくそうと思うと'opacity':'1'とします。

逆に表示をなしにしてしまうには、'opacity':'0'とします。

一番上にあるとき（初期状態）、スクロール時、オンマウス時、マウスを外したとき、と4種類の設定が可能です。

スクロールしたときに消えてマウスを乗せると再び現れるなんてこともできます。