logwでは使っていませんがちょっと気になったjQueryがあったので調べてサンプルを作ってみました。もしよろしければサンプルファイルからダウンロードして使ってみてください。

ヘッダーメニューで使える

次のサイトを作るときに使ってみようと思うのですが、ヘッダーメニューを固定してスクロールすると薄くなるというサンプルになります。

jQueryをダウンロード

まずはjQueryを公式サイトからダウンロードしてください。

HTMLを記述

次にHTMLを簡単に記述します。

<header>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル2</a></li>
</ul>
</nav>
</header>

CSSで装飾

HTMLを記述したら簡単にCSSで装飾します。

*{
margin:0;
padding:0;
}

/* ブロック要素に変換 */
header,
article,
nav{
display:block;
}

/* ヘッダー設定 */
header{
width:100%;
background:-moz-linear-gradient(top, #616161, #333333);
position:fixed;
z-index:999;
}

header nav{
margin:0 auto;
width:900px;
height:40px;
overflow:hidden;
}

header nav ul li{
width:100px;
list-style-type:none;
display:box;
display:-moz-box;
display:-webkit-box;
display:-ms-box;
border-left-style:solid;
border-right-style:solid;
border-right-color:#fff;
border-width:1px;
}

/* リンクの色 */
header nav ul li a{
padding:0 10px;
height:40px;
display:block;
color:#fff;
border-top-style:solid;
border-width:3px;
border-color:#616161;
}

header nav ul li a:hover{
width:100px;
border-top-style:solid;
border-width:3px;
border-color:#09F;
}

article{
position:relative;
top:40px;
margin:0 auto;
width:900px;
height:1500px;
}

このCSSはサンプルファイルのCSSになります。

headにスクリプトを記述

headに以下のスクリプトを記述します。

<script type="text/javascript">
  $(function() {
      $(window).scroll(function(){
     var scrollTop = $(window).scrollTop();
     if(scrollTop != 0)
      $('header').stop().animate({'opacity':'0.2'},400);
     else
      $('header').stop().animate({'opacity':'1'},400);
    });

    $('header').hover(
     function (e) {
      var scrollTop = $(window).scrollTop();
      if(scrollTop != 0){
       $('header').stop().animate({'opacity':'1'},400);
      }
     },
     function (e) {
      var scrollTop = $(window).scrollTop();
      if(scrollTop != 0){
       $('header').stop().animate({'opacity':'0.2'},400);
      }
     }
    );
  });
</script>

記述したらブラウザで見てください。IEだと上手く表示されないと思うのでSafari、chrome、firefoxなどが見てください。

ダウンロード

サンプルファイルのダウンロードはこちらからできます。