jQueryでスクロールすると上部に固定されるナビゲーション

Posted: 2012.02.21 / Category: javascript / Tag: jQuery

グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。

Demo

html & css

htmlです。

html

	<h1><a href="#">タイトル</a></h1>
	<div class="nav">
		<ul class="clearfix">
			<li><a href="#">HOME</a></li>
			<li><a href="#">ABOUT</a></li>
			<li><a href="#">NEWS</a></li>
			<li><a href="#">LINK</a></li>
		</ul>
	<!-- /#nav --></div>
	<div id="article">
		・・・
	<!-- /#article --></div>

ナビゲーション部分のcssはこんな感じです。

css

	.nav {
		padding: 0 20px;
		margin: 0 auto 60px;
		width: 760px;
		font-size: 85%;
		background: #555;
	}
	.nav li {
		list-style: none;
		float: left;
	}
	.nav li a {
		text-decoration: none;
		color: #fff;
		padding: 8px 12px;
		display: block;
	}
	.nav li a:hover {
		background: #666;
	}
	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

jQueryでは「.fixed」クラスを追加したり削除するだけなので、「<div class="nav">」で通常のナビゲーション表示で、「<div class="nav fixed">」で上部に固定されるようにcssを設定しておきます。

jQuery

「$(window).scroll」はスクロールするたびに実行されるイベントなので、この中でナビゲーションが現在の位置より上か下かの条件分岐をすればいいだけです。

javascript

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {
		var nav = $('.nav');
		//navの位置	
		var navTop = nav.offset().top;
		//スクロールするたびに実行
		$(window).scroll(function () {
			var winTop = $(this).scrollTop();
			//スクロール位置がnavの位置より下だったらクラスfixedを追加
			if (winTop >= navTop) {
				nav.addClass('fixed')
			} else if (winTop <= navTop) {
				nav.removeClass('fixed')
			}
		});
	});
	</script>

プルダウンメニューをつける

プルダウンメニューはいろいろプラグインがあると思いますので、普通につけてもらえればいけると思います。
一応簡単なものですが載せておきます。

javascript

	$(function() {
		var nav = $('.nav');	
		var navTop = nav.offset().top;
		$(window).scroll(function () {
			var winTop = $(this).scrollTop();
			if (winTop >= navTop) {
				nav.addClass('fixed')
			} else if (winTop <= navTop) {
				nav.removeClass('fixed')
			}
		});
		//サブナビゲーション
		$('li', nav).hover(function(){
			$('ul',this).slideDown('fast');
		},
		function(){
			$('ul',this).slideUp('fast');
		});
	});

その他スクロール関係の記事はこちらもどうぞ

jQueryでスクロールすると表示する系いろいろ

COMMENTS

るい　2012-05-07 20:14　

初めまして。
こちらのグローバルナビゲーションを頂戴したのですが、メニューがプルダウン化出来ると嬉しいなと。。色々方法を探してるのですが、どうにも私の頭では作れそうにないです。お時間がありましたら、プルダウンメニュー版も作っていただけると幸いです。催促になりすみません。

webOpixel　2012-05-10 13:54　

プルダウンメニュー作ってみました。
http://www.webopixel.net/lab/sample/12/0221scroll-fixed/subnavi.html

るい　2012-05-10 23:21　

webOpixel様
無事にプルダウンメニュー版を設置することができました。まだデモそのままの段階なので、少しずつ手を加えながら、自分のサイトにあった形にしていきたいと思います。本当に有難うございました。

レン　2012-05-15 18:29　

webOpixel様

初めまして。
こちらの記事を拝見してナビゲーションを設置させて頂いた者です。

設置させて頂きIPadで動かしていたのですが、ナビゲーションは固定されるのですがページ内でリンクした場合、一度はリンクしたidまで遷移するのですが、遷移した先でナビゲーションをタッチしても無反応になります。

少しスクロースさせてからはナビゲーションが正常に動きます。
IPadの仕様だろうと思い色々試行錯誤はしているのですが、何か解決策をご存知かと思い書き込みさせて頂きました。

突然このような書き込みで申し訳ありません。

webOpixel　2012-05-17 16:59　

確かに動きませんね。。。

少し調べてみたのですが、スマートフォンではfixed配置にバグがあるようなので、
JSで対応した方がいいとのことです。

具体的な答えになっていなく申し訳ありませんが、
こちらでももう少し調べて何かわかりましたらご紹介します。

レン　2012-05-21 10:57　

webOpixel様

ご返信ありがとうございます。
やはりバグがあるのですね、JSでに対応も試みたのですがなかなかうまくいかずで。

なにか解決策があればいいいのですが。

私も引き続き解決策調べてみようと思います。
webOpixel様の記事たのしみにしております。

ナナオ　2012-06-19 21:14　

こんにちは！こんなプルダウンメニューを探していました！
ありがとうございます。

が・・・、ページの内容にJWplayerを貼り付けてスクロールすると、
メニューの上に映像がきてしまって
メニューが使えなくなってしまいます。

映像画面をメニューの下にする方法を、ご存知でしたら教えてください。
よろしくお願いします。

webOpixel　2012-06-20 11:15　

JWplayerは使用したことがないのでわからないのですが、
Flashに関しては上に表示されない設定があったと思います。

カスミ　2013-02-04 21:27　

ライブドアブログに取り入れてみたところ、上部に配置でき、スクロールも大丈夫でした。

しかし、黒い部分が半透明になり、色つき文字が透けてきてメニューバーが見えぬくくなったり、記事中の写真画像は最前面に出てきてしまいメニューバーが下に潜り込むようになってしまいます。

ナナオさんと同じ状況です。
windows7 HP64bit IE8 firefox18.0.1なのですが、無料ブログでの導入は問題が起こりやすいのでしょうか?

webOpixel　2013-02-05 22:15　

「.nav」のcssに「z-index:10;」のように設定してみてください。

カスミ　2013-02-06 10:30　

お返事ありがとうございます。
半透明になる現象は解決いたしました。

素敵なパーツをありがとうございました。

kazu　2013-04-13 15:11　

はじめまして！こちらのサイトからメニューバーの追尾するJqeryのやり方を知り、私のブログにも使わせて頂きました。サイトの紹介も勝手ながらさせて頂きました。もしもご都合が悪ければ削除いたしますので宜しくお願いします。

webOpixel　2013-04-14 15:07　

kazuさん
コメントありがとうございます。
自由に使用していただいて大丈夫です。

Cyuo_Rapid　2013-06-15 19:38　

webOpixelさん
はじめまして。
サイトを運営していて、今現在プルダウンのシステムがほしく、Google検索させていただきました。
非常に使えると思ったので、使わせていただきます。
いいプログラムの作成ありがとうございました。
質問などありましたら、再度聞かせていただきます。

O-!!　2013-10-19 11:06　

はじめまして。
jQueryでスクロールすると上部に固定されるナビゲーションを設置してサイトを作っているのですがスクロール以下に設置している動画（再生時）どうしても最前面に来てしまいます。何か対策方法はありますか？

webOpixel　2013-10-21 15:07　

動画の方が前面に出てくるということでしょうか？
z-indexを設定してもだめですか？

まる　2013-12-30 06:13　

はじめまして。
これ、素晴らしいですね！
固定したナビの後についてきた要素が、固定ナビがfixedになった途端少々上に移動してしまうのですが、こちらはどうにかならないものでしょうか？

webOpixel　2014-01-02 12:10　

サンプルので確認した場合ですか？
よろしくかったらどのような環境で閲覧しているか教えてください。

moto　2014-01-28 18:50　

はじめまして。こんな固定メニューを探していました！
こちらを是非利用したいのですが、ライセンスはどのようになっておりますでしょうか？
商用サイトでの利用を考えております。

また、利用しても良い場合、著作権表示などは必要でしょうか？
何卒よろしくお願い致します。

webOpixel　2014-01-29 15:31　

わざわざコメント有難うございます。
コードは簡単なものですので自由に使って頂いて大丈夫です。

Tenz　2014-08-20 16:35　

動画が、メニューの上に乗っかる件・・・
JWplayerを貼り付けたhtmlをインラインフレームにしてみてはいかがでしょうか？

さて、ときどき訪問させていただいています。
最新のコンテンツ制作スキルネタを勉強させていただいています。

ところで、メニューバーのメニューを中央に揃えたいのですが、

では、うまく表示されません。
メニューをテーブルに入れて、テーブルごとセンタリングしたり
してみましたが、これもダメで、行き詰まりました。
CSSの記述をご教授いただけませんでしょうか。
よろしくお願いいたします。

webOpixel　2014-08-22 14:42　

ちょっとどのように配置しているかにもよりますが、liを「display:inline」にすれば、ulを「text-align: center」で中央にできます。
このへんは完全にcssになりますので、そういうページを探してみた方が早いかなと。

sp　2017-04-06 17:52　

初めまして。とても参考になりました。ありがとうございます。

一点気になったのですが、メニューが固定化される時、fixedになる影響でメニューの高さ分だけコンテンツが上がってしまう現象を回避できる方法ってありますか？　メニューが高ければ高いほど一気にコンテンツが移動してしまうので気になります。

webOpixel　2017-04-10 13:28　

サンプルはナビゲーションにfixedクラスを付与してしまってますが、
bodyなど他の部分に付与してpaddingを指定するとかはどうですかね。