サイトにアクセスした最初の時点から、スクロールをするとサイズが小さくなるヘッダーってよくありますよね。最初は大きく見せたいけど、スクロールしてコンテンツを見始めたら小さくしたい、というものです。
使う機会の多い技術ですので、簡単な方法をまとめてみます。
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の方はなるべくシンプルにしておきたいので、この手法をよく使います。
ぜひお試しください。