コード

デフォルトでは通常のヘッダーだが、ページを下スクロールさせていくことによりウィンドウ上部に到達。それをトリガーにして、上部にそのまま固定させる方法をご紹介。

サンプル

See the Pen fixed_header_by_scroll by Tora (@webtoranomaki) on CodePen.

コード

HTML

<div class="gnav-outer">
	<div class="fixed-header">
    		fixed-header
	</div>
</div>
<div id="content">content</div>

CSS

.header-outer {
	height: 40px;
	padding-top: 40px;
}
.fixed-header {
	box-sizing: border-box;
	width: 100%;
	padding: 8px;
	color: #fff;
	background: #000;
	overflow: hidden;
}
.fixed-header.fixed {
	position:fixed;
	top: 0;
}
#content {
  height: 2500px;
  background: -prefix-linear-gradient(top, #999, #efefef);
  background: linear-gradient(to bottom, #999, #efefef);
}

javascript

jQueryライブラリを読み込む。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

スクリプトを記述する。

$(function($) {
	var nav = $('.fixed-header'),
	offset = nav.offset();
	// スクロール値が上で指定した要素の位置に到達したら、その要素に「.fixed」を付与する
	$(window).scroll(function () {
		if($(window).scrollTop() > offset.top) {
			nav.addClass('fixed');
		} else {
			nav.removeClass('fixed');
		}
	});
}); 

解説

こういったウィンドウ上部に来ると固定要素になる動きで注意しなくちゃいけないのは、その要素が固定要素として元の場所から抜けた時に、その抜けたスペースを埋めようと下の要素が上にズルッとずれてくること。それが起きないように、上記サンプルでは、padding-topでheaderの高さ分の余白を持つheader-outerという要素を用意して、その中にheaderを入れて、margin-topでマイナス値をして相殺させている。

これにより、headerが固定要素としてouterから抜けてもouterはheaderの高さ分の余白を持っているので、下の要素たちが上にずれ込んでしまう事態が防げる以下に、その処理を施していないNGなバージョンの固定ヘッダーサンプルを用意してみた。試しに下にスクロールしてみて欲しい。Aの行が少し隠れるあたりで固定ヘッダーが発動するのだが、Bの行やCの行が飛ばされるのが分かるはずだ。

See the Pen ページ上部に到達した時点で固定するヘッダー (NG ver.) by Tora (@webtoranomaki) on CodePen.