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

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

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

jQueryをダウンロード

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

HTMLを記述

次に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>
[/html]

CSSで装飾

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

[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はサンプルファイルのCSSになります。

headにスクリプトを記述

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

[js]
<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>
[/js]

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

ダウンロード

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