固定ヘッダーをある程度スクロールしたら縮小して表示する

ヘッダーを固定しているときに、ある程度スクロールしたら高さを縮小したいということがよくあるので、そのサンプルを作ってみます。

サンプルコード

HTML

<header class="header">
	<div class="inner clearfix">
		<div class="header-logo"><a href="">ロゴ</a></div>
		<nav class="header-nav">
			<ul>
				<li><a href="">ナビ1</a></li>
				<li><a href="">ナビ2</a></li>
				<li><a href="">ナビ3</a></li>
				<li><a href="">ナビ4</a></li>
				<li><a href="">ナビ5</a></li>
			</ul>
		</nav>
	</div>
</header>

CSS

/* 通常のヘッダー */
.header {
	position: fixed;
	width: 100%;
	background: #ccc;
}
.header .inner {
	width: 960px;
	margin: 0 auto;
}
.header a {
	display: block;
	padding: 20px 0;
}
.header .header-logo {
	float: left;
	width: 300px;
}
.header .header-nav {
	float: right;
	width: 600px;
}
.header .header-nav li {
	float: left;
	width: 120px;
	text-align: center;
}

/* スクロール後のヘッダー */
.header.fix a {
	display: block;
	padding: 5px 0;
}

JavaScript

$(function() {
	headerAdjust('.header');
	$(window).on('scroll', function() {
		headerAdjust('.header');
	});
});

// ヘッダーのサイズ調整
var adjustPoint = 20;
var adjustClass = 'fix';
function headerAdjust(tgt) {
	var scrollTop = $(window).scrollTop();
	if(scrollTop > adjustPoint) {
		$(tgt).addClass(adjustClass);
	} else {
		$(tgt).removeClass(adjustClass);
	}
}

スクロールでヘッダーを縮小するデモページ
あらかじめ縮小用のclassを準備しておいて、スクロール位置に応じてclassを付けたり外したりしています。