スクロールしても画面上部に固定されるメニュー

jQeuryを読み込む

まずHTMLをマークアップしていきます。

jQueryを読み込みましょう。

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

<script>window.jQuery || document.write(‘<script src=”/common/javascript/jquery.min.js”><\/script>’)</script>

HTMLのマークアップ

次にナビゲーション部分をマークアップします。

このサンプルでは、ナビゲーション・メニューの項目は１つとしているため

ここではdiv要素を使ってマークアップしています。

通常はul要素やli要素を利用して作成するといいでしょう。

<header>
<h1>ヘッダーメニュー</h1>
<div class=”navi”>
<h2>メニュー１</h2>
</div>
</header>

CSSにナビゲーションの表示位置を記述

スクロールした際に、ナビゲーションバーを固定するためのスタイルを

CSSで記述します。この指定によって、スクロール後の位置が確定されます。

また、この指定はJavaScriptの処理で追加されるので、作成したHTMLタグには

指定しません。

.fixed{
position: fixed;
top:0;
width: 100%;
}

JavaScriptの記述

JavaScript側の記述としても、スクロールした際ナビゲーションを

固定化する処理を記述します。

デモページ