トップページ
カテゴリ
タグ

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

よく見かけるタイプのjQueryを使ったスクロールしても上に固定されているメニューを紹介します。最近FC2ブログの上部に現れた検索バー(このブログは非表示にしてます)みたいな感じです。
scrollmenu.png

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

javascriptの部分は次のようになっています。
js
<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>

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

scrollmenucode.png

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

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

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

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

フィードやTwitterで最新情報をチェック

最新エントリーはフィードやTwitterでチェックできますので、ぜひご登録お願いします。

  
この記事に付いているタグの最新記事一覧
loading...
コメント
CSSで「position: fixed;」するのとどちらが良いだろうか?
やっぱりクロスブラウザ的なことを考えるとjQuery使った方がよいのでしょうか?
【2011/03/24 15:21】 | - #- | [edit]
IE6は無視して半透明が必要なければ「position: fixed;」でもいいと思います。

CSSハックを使えばIE6でも「position: fixed;」を使えますが、
個人的にはCSSハックを使うならjQueryで今回のようにしたいです。

ほんとIEは対応に困りますね。
【2011/03/24 21:53】 | 管理人 #E2ywrYdA | [edit]
このコメントは管理人のみ閲覧できます
【2011/03/25 16:03】 | - # | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけましたら幸いです。技術的なご質問には答えられないことが多いかと思います。

トラックバック
トラックバックURL:
Latest Articles
Popular Articles
  • このエントリーをはてなブックマークに追加