• Tweet
• 

初期状態ではヘッダバーは表示されず
ある程度下にスクロールした時にメニューや検索ボックスのヘッダバーを表示する方法です。

手段はいくつかありますが、
今回はメニュー等はあらかじめ画面外に表示しておいて
スクロールした時に画面内に移動する方法を行います。


最初にGoogle提供のjsを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

HTMLは検索ボックスのあるヘッダバーと
スクロール用の縦長DIVのみです。

	<div id="head_bar">
		<input type="text"><button>検索</button>
	</div>
	
	<div style="height:3000px;">　</div>

スタイルでヘッダバーを隠しておきます。

<style type="text/css">
	#head_bar{
		width: 100%;
		height:50px;
		background-color:#333;
		position: fixed;
		top: -50px;
		padding-left:20px;
		line-height:50px;
	}
</style>

ウインドウのスクロールをトリガーにヘッダバーの位置を変更します。

	<script type="text/javascript">
	$(function(){
	    var bar = $("#head_bar");
	    $(window).scroll(function () {
	        if($(window).scrollTop() >= 200) {
	       		if(!bar.is(':animated')){
			        bar.animate({
			    		'top': '0px'
					},200);
				}
	        } else {
		        bar.animate({
		    		'top': '-50px'
				},50);
	        }
	    });
	});
	</script>

ウインドウのスクロールが200pxを超えたら
ヘッダーバーのtopを0pxにします。

いきなり表示されるのも不自然なので
アニメーションを使い、上からスライドしてくるようにします。

下方にスクロール中に何度もアニメーションイベントが発生してしまうので

if(!bar.is(':animated')){

でアニメーション中は実行されないようにします。

サンプルページ