【jQuery】下にスクロールするとデザインがコンパクトに変化するスティッキーヘッダーの作り方

key-visual jQuery

「スティッキーヘッダーにしてみたけど大きすぎて結構邪魔だな…途中でコンパクトに変わるようにしたいな」

そんな人のために今回はjQueryを使った、スクロールするとヘッダーのデザインが変わってコンパクトになるスティッキーヘッダーを作り方を紹介します。

今回は通常のヘッダーがスクロールによって画面外に出たらコンパクトなスティッキーヘッダーを上からスッと出すようにします。

最初に言っておくと、めちゃめちゃ簡単に作れます。ちょっとjQueryとCSSをいじるだけです。

 

まずはデモページをどうぞ↓

 

スポンサーリンク

コード

急ぎの方のためにコードだけ最初に載せておきます。

コピペして使ってください。

<header id="header">
    <div class="header">
        通常のヘッダーです
    </div>
    <div class="sticky-header">
        スティッキーヘッダーです
    </div>
</header>

 

#header {
    position: relative;
    height: 100px;
}
.sticky-header {
    position: fixed;
    width: 100%;
    height: 50px;
    z-index: 9999;
    transition: 0.25s;
}

 

$('#header').each(function(){
    var $window = $(window),
    $stickyHeader = $(this).find('.sticky-header'),//スティッキーヘッダー
    stickyHeaderHeight = $stickyHeader.outerHeight(),//スティッキーヘッダーの高さ
    headerHeight = $(this).outerHeight();//ヘッダー全体の高さ

    //画面外へ
    $stickyHeader.css({ top: '-' + stickyHeaderHeight + 'px' });

    //ページの一番上からヘッダーの高さ分下方向にスクロールしたらtopを0に、それ以外は画面外へ
    $window.on('scroll', function(){
        if($window.scrollTop() > headerHeight) {
            $stickyHeader.css({top:0});
        } else {
            $stickyHeader.css({ top: '-' + stickyHeaderHeight + 'px' });
       }
    });

    //任意のタイミングでイベントを発生させる
    $window.trigger('scroll');
});

 

作り方

考え方

途中でヘッダーのデザインを変える場合は、「通常時のヘッダー」と「スティッキーヘッダー」の2つを用意しておくことになります。HTMLとCSSで両方ともコーディングをしておきましょう。

考え方としては通常のヘッダーがスクロールによって画面外に出たらスティッキーヘッダーとすり替えるようにします。

つまり通常のヘッダーの高さ分スクロールしたらスティッキーヘッダーを上から出せばいいと言うことになります。

 

スティッキーヘッダーは最初は見えないようにするので、スティッキーヘッダーの高さ分topをマイナスに指定することで画面外に出して見えないようにしておきます。

 

コードの解説

HTML

HTMLは特に大丈夫だと思います。通常時のヘッダーとスティッキーヘッダーの2つを用意するだけです。

 

CSS

CSSでは、スティッキーヘッダーは上に固定するので、position: fixedを指定します。topの値はjQueryで操作します。

また、z-index: 9999;を指定してページの最前に表示します。

スティッキーヘッダーとすり替えるモーションをなめらかに行いたいのでtransition: 0.25sを指定します。

 

jQuery

変数は上に書いてある通りです。find()メソッドなどで必要な要素を絞り込みましょう。

通常時のヘッダーとスティッキーヘッダーの高さを調べるためにouterHeight()メソッドを使います。スティッキーヘッダーを出したり引っ込めたりするのに必要になります。

 

まず最初にスティッキーヘッダーを画面の上に隠すために、スティッキーヘッダーの高さ分topにマイナスの値を指定します。

$stickyHeader.css({ top: '-' + stickyHeaderHeight + 'px' });

 

スティッキーヘッダーが出てくる条件は画面のスクロール量が通常のヘッダーの高さを上回った時です。

この時にスティッキーヘッダーをtop: 0;にして画面の上部に固定されるようにします。

$window.on('scroll', function(){
    if($window.scrollTop() > headerHeight) {
        $stickyHeader.css({top:0});
    } else {
        $stickyHeader.css({ top: '-' + stickyHeaderHeight + 'px' });
    }
});

 

以上で途中でデザインがコンパクトに変わるスティッキーヘッダーの完成です。

あとはロゴだったりグローバルメニューだったりをお好みで入れれば完璧です。

 

スティッキーヘッダーの作り方など、基本的なjQueryの使い方は以下の本で勉強しました。

初心者にもわかりやすく解説されているので、これ1冊で基本はバッチリです。

 

また、CSSだけでもスティッキーヘッダーを作ることはできます。

コードもめっちゃ簡単なので、jQueryを使いたくない人は以下の記事を参考にしてみてください。