スクロールすると小さくなるヘッダーの作り方

サイトにアクセスした最初の時点から、スクロールをするとサイズが小さくなるヘッダーってよくありますよね。最初は大きく見せたいけど、スクロールしてコンテンツを見始めたら小さくしたい、というものです。

使う機会の多い技術ですので、簡単な方法をまとめてみます。
HTML / CSS / JS で作っていきます。

仕様を決める

今回は、下記の仕様を想定して作っていきます。

• ヘッダーの中にはロゴとナビゲーションの2つの要素がある。
• スクロール量が、ヘッダーの高さを超えると、小さくなる。
• スクロール量が、ヘッダーの高さを下回ると、元に戻る。

これを実現するために、ヘッダーの高さを基準に、スクロール量によって、それぞれの要素にclassを付けたり取ったりするスクリプトを書いていきます。

要素をJSで取得

JSで取得して操作したい要素は下記のものになります。

• ヘッダー要素　<header id=”header”>とします。
• ロゴ要素　<div id=”headerLogo”>とします。
• ナビゲーション要素　<nav id=”headerNav”>とします。
• スクロール量
• ヘッダー要素の高さ

//ヘッダー要素↓
var header = $("#header");
//ロゴ要素↓
var logo = $("#headerLogo");
//ナビゲーション要素↓
var navi = $("#headerNav");
//スクロール量↓
$scrollTopDistance = $(window).scrollTop();
//ヘッダーの高さ量↓
var headerHeight = header.outerHeight(true);

これで必要な要素の取得ができました。

付与するclassを設定

今回は、それぞれの要素に .is_scroll というクラスが付与されると小さくなるようにします。CSS上でそれぞれの要素に書いていきます。
例えば、headerの元の高さが100pxで、小さくなると50pxにするなら下記の様な書き方です。

このとき、transitionを入れておくと、動きが滑らかになります。

header{
  height:100px;
  transition: all 0.3s;
}
header.is_scroll{
  height:50px;
}

JS側で動かす前に、手動で.is_scrollを付けてみて、理想的な大きさになるか確認します。

JSでスクリプトを組んでいく

ここから書いていくスクリプトを、まず日本語で表現するとこうなります。

もし、スクロール量がヘッダーの高さを上回ったら、.is_scrollを付与する。
もし、スクロール量がヘッダーの高さを下回ったら、 .is_scrollを除去する。
この処理を、スクロール操作するたびにおこなう。

これをスクリプトで書くとこうなります。

//スクロール操作するたびに起動
$window.on('scroll', function() {
　　　　//スクロール量を取得
	$scrollTopDistance = $(window).scrollTop();
　　　　//もしスクロール量がヘッダーの上回ったら
	if($scrollTopDistance >= headerHeight){
　　　　　　　　　//クラスを追加する
		header.addClass('is_scroll');
		logo.addClass('is_scroll');
		navi.addClass('is_scroll');
　　　　//もしスクロール量がヘッダーの高さを下回ったら。
	}else if($scrollTopDistance <= headerHeight){
　　　　　　　　　//クラスを除去する
		header.removeClass('is_scroll');
		logo.removeClass('is_scroll');
		navi.removeClass('is_scroll');
	}
});

このようになります。

クラスの追加や除去の部分を、JSから直接操作してもいいです。たとえば、jQueryの.hide()などを使ってもいいでしょう。

まとめ

今回のスクリプトの全文を書くとこのようになります。

//要素の取得
var header = $("#header");
var logo = $("#headerLogo");
var navi = $("#headerNav");
$scrollTopDistance = $(window).scrollTop();
var headerHeight = header.outerHeight(true);

//要素の操作
$window.on('scroll', function() {
	$scrollTopDistance = $(window).scrollTop();

	if($scrollTopDistance >= headerHeight){
		header.addClass('is_scroll');
		logo.addClass('is_scroll');
		navi.addClass('is_scroll');
	}else if($scrollTopDistance <= headerHeight){
		header.removeClass('is_scroll');
		logo.removeClass('is_scroll');
		navi.removeClass('is_scroll');
	}
});

classの追加・削除での操作なので、CSSの方で色々なアニメーションや動きを作れば、それを入れることもできます。

私はJSの方はなるべくシンプルにしておきたいので、この手法をよく使います。

ぜひお試しください。