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でスクロールすると表示する系いろいろ