【jQuery】スクロールしたらヘッダーを追従させる方法

多くのPCやSPのサイトでスクロールするとヘッダーやフッターなどを固定化させているのをよく見かけます。

追従させる対応は見た目だけではなく重要なボタンや同線を固定化させることでサイト内回遊率を高める効果があります。

対応したことがない人からみたらなんだか…難しそうと思うかもしれません。

ですがcssやjsを使うことで簡単に実装することができます。

cssだけで対応することもできますが今回はcssやjsを使って実装する方法を紹介していきたいと思います。

スクロールしたらヘッダーを追従させる方法

今回の例は一番上からスクロールの位置がヘッダー分の高さを超えたら追従する方法になります。

html

<header>ヘッダー部分</header>

css

header.follow{ 
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;       
}

js

jQuery(document).ready(function() {
        var $fixHeader = jQuery('header');
        var headerH = jQuery('header').height()
        var windowTop;
        var scrollClass = 'follow';

        headerFollow();

        jQuery(window).on('scroll', function () {
                headerFollow();
        });

        function headerFollow () {
                windowTop = jQuery(window).scrollTop();

                if (windowTop >= headerH) {
                        $fixHeader.addClass(scrollClass);
                } else if (windowTop <= headerH) {
                        $fixHeader.removeClass(scrollClass);
                }
        }
});    

まとめ

今回はcssとjsを使いましたがやろうと思えばcssで追従化させることもできます。

あらかじめヘッダーをpositionをfixedにさせておいて上からヘッダー分の余白をあけておけば追従のような見た目になります。