■ Webデザインを学ぶ【初級/後編】,  ◎ 様々な演出効果

グローバルメニューを移動し固定する

ヘッダーの直下にあるナビゲーションが、スクロールすると、ページトップの位置に固定されるように実装します。
▶ 【サンプルを見る】

固定するためのセレクターを記述する

positionをfixedに指定することで、位置が固定されます。
z-indexプロパティは、ボックスの重なり順序を指定する際に使用します。 値が大きい要素ほど前面にきますので、今回は優先的に前面に指定しておきます。
▶ 【サンプルを見る】

① CSSの記述

[code]
.fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
[/code]

② jQueryの記述

jQueryを使用しますので、CDNを追記します。
[code]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
[/code]


[code]
<script type="text/javascript">
jQuery(function($) {
var nav = $(‘#fixedBox’),
offset = nav.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {// トップの位置に来た時//
nav.addClass(‘fixed’);//fixedというクラスを付与//
} else {
nav.removeClass(‘fixed’);//トップの位置でなくなればfixedというクラスが有効//
}
});
});
</script>
[/code]

ナビゲーション部

[code]
<div id="fixedBox" class="nav">
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</div>
[/code]