Cacher is the code snippet organizer for pro developers

$(function() {
  var nav = $('.nav');
	//表示位置
	var navTop = nav.offset().top+500;
	//ナビゲーションの高さ（シャドウの分だけ足してます）
	var navHeight = nav.height()+10;
	var showFlag = false;
	nav.css('top', -navHeight+'px');
	//ナビゲーションの位置まできたら表示
	$(window).scroll(function () {
		var winTop = $(this).scrollTop();
		if (winTop >= navTop) {
			if (showFlag == false) {
				showFlag = true;
				nav
					.addClass('fixed')
					.stop().animate({'top' : '0px'}, 200);
			}
		} else if (winTop <= navTop) {
			if (showFlag) {
				showFlag = false;
				nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
					nav.removeClass('fixed');
				});
			}
		}
	});
});

<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>
</div>

.nav {
  padding: 0 20px;
	margin: 0 auto 60px;
	width: 760px;
}
.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

	//ヘッダー処理
	var nav    = $('#gNav'),
	    offset = nav.offset();
	  
	$(window).scroll(function () {
	  if($(window).scrollTop() > offset.top) {
	    nav.addClass('fixed');
	  } else {
	    nav.removeClass('fixed');
	  }
	});