スクロールしても画面上部に固定されるメニュー
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のマークアップ
次にナビゲーション部分をマークアップします。
このサンプルでは、ナビゲーション・メニューの項目は1つとしているため
ここではdiv要素を使ってマークアップしています。
通常はul要素やli要素を利用して作成するといいでしょう。
<header>
<h1>ヘッダーメニュー</h1>
<div class=”navi”>
<h2>メニュー1</h2>
</div>
</header>
CSSにナビゲーションの表示位置を記述
スクロールした際に、ナビゲーションバーを固定するためのスタイルを
CSSで記述します。この指定によって、スクロール後の位置が確定されます。
また、この指定はJavaScriptの処理で追加されるので、作成したHTMLタグには
指定しません。
.fixed{
position: fixed;
top:0;
width: 100%;
}
JavaScriptの記述
JavaScript側の記述としても、スクロールした際ナビゲーションを
固定化する処理を記述します。
関連記事
-
-
もっと読み込む機能の実装の備忘録
もっと読み込む機能 自分のサイトにもっと読み込む機能を実装するときのメモです。 …
-
-
クリックで表示・非表示が切り替わるメニューバー
jqueryをHTMLに組み込む 下記のコードをHTMLに記述してjqueryを …
-
-
上下スクロールに対応したパララックス効果
「skrollr」の特徴 Webサイトの演出手法であるパララックス効果は背景、画 …
-
-
横から出てくるサイドメニュー
Snap.jsをダウンロードして準備 まずはページを左右にスライドしてメニュー表 …
-
-
スマホに効果的なスライドメニューをjqueryの「mmenu.js」で実装する
mmenuでスライドメニューを実装 よく見る横からスライドして出てくるメニューを …
- PREV
- 上下スクロールに対応したパララックス効果
- NEXT
- クリックで表示・非表示が切り替わるメニューバー