サイト開発日記

Just another WordPress site

*

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

   

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

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

no image
上下スクロールに対応したパララックス効果

「skrollr」の特徴 Webサイトの演出手法であるパララックス効果は背景、画 …

no image
もっと読み込む機能の実装の備忘録

もっと読み込む機能 自分のサイトにもっと読み込む機能を実装するときのメモです。 …

no image
クリックで表示・非表示が切り替わるメニューバー

jqueryをHTMLに組み込む 下記のコードをHTMLに記述してjqueryを …

no image
スマホに効果的なスライドメニューをjqueryの「mmenu.js」で実装する

mmenuでスライドメニューを実装 よく見る横からスライドして出てくるメニューを …

no image
横から出てくるサイドメニュー

Snap.jsをダウンロードして準備 まずはページを左右にスライドしてメニュー表 …