jQuery＋CSS3でスクロールしたときに、ナビゲーションヘッダーを固定する方法

はじめに

弊社の一部のサービス・ページで使用している、
スクロールしたときに、ナビゲーションヘッダーを固定する方法をご紹介したいと思います
（本記事用に若干修正いたしました）

固定する方法は、2パターン

• タブ切り替えでコンテンツに移動するパターン
• アンカーリンクでコンテンツに移動するパターン

ページの構成によって、使い分けています。

実装方法

head内にjQueryを読み込ませます。

html5

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

【パターン1】 タブ切り替えでコンテンツに移動するパターン

javascript

javascript：タブ切り替え

<script>
    $(function() {
        // タブの切替
        $(".tab__block a").click(function() {
            $(".tab__block a").removeClass("select"); // classを削除
            $(this).addClass("select"); // クリックしたナビゲーションにclassを追加
            $("html,body").animate({scrollTop:$("#top").offset().top}); // コンテンツ上部までスクロール
            var num = $(".tab__block a").index(this);
            $(".wrap").removeClass("select"); // classを削除
            $(".wrap").eq(num).addClass("select"); // コンテンツにclassを追加し、表示を切り替える
        });

        // ヘッダーを固定
        var bt = $("#nav").offset().top; // ページ上からの距離を取得
        var ds = 0;

        $(document).scroll(function(){ // スクロール発生時の処理の記述を開始
            ds = $(this).scrollTop(); // スクロールした距離を取得
            if (bt <= ds) {  // スクロール距離がnavの位置を超えると
                $("#nav").addClass("follow"); // classを追加
            } else if (bt > ds) { // スクロールがページ上まで戻ると、
                $("#nav").removeClass("follow"); // classを削除
            }
        });
    });
</script>

• タブ<a>をクリックすると、class="select"が追加され、コンテンツ上部まで移動します。また違うタブ<a>をクリックすると、別のコンテンツの上部に移動します。
• スクロールイベントが始まると、スクロールした距離を取得します。ヘッダーの距離まで移動すると、id="nav"にclass="follow"が追加され、position: fixed; top: 0;が付与され固定されます。スクロールがヘッダーより上に戻ると、id="nav"のclass="follow"が削除され、固定されなくなります。

Sass

Sass

// ナビの高さ
$navi_height: 68px;

.body {
    position: relative;
    // ナビ
    .tab__block {
        position: absolute;
        top: 0;
        box-sizing: border-box;
        width: 100%;
        height: $navi_height;
    }
    .tab {
        a.select {
            // 選択時の指定
        }
    }
    // コンテンツを囲む
    .wrap {
        display: none;
        padding-top: $navi_height;
        &.select {
            display: block;
        }
    }
}

// スクロールで付加される
.follow {
    position: fixed! important;
    top: 0! important;
    z-index: 10;
    width: 100%;
}

• $navi_heightにナビゲーションの高さを指定します
• ※装飾部分は省略しています

HTML

html5：タブ切り替え

<header><!-- メインビジュアルはこの位置 --></header>
<div class="body" id="top">
    <div id="nav" class="tab__block">
        <ul>
            <li class="tab"><a href="javascript: void(0);" class="select">AAA</a></li>
            <li class="tab"><a href="javascript: void(0);">BBB</a></li>
            <li class="tab"><a href="javascript: void(0);">CCC</a></li>
            <li class="tab"><a href="javascript: void(0);">DDD</a></li>
            <li class="tab"><a href="javascript: void(0);">EEE</a></li>
        </ul>
    </div>
    <div class="wrap select">
        <p>AAA</p>
    </div>
    <div class="wrap">
        <p>BBB</p>
    </div>
    <div class="wrap">
        <p>CCC</p>
    </div>
    <div class="wrap">
        <p>DDD</p>
    </div>
    <div class="wrap">
        <p>EEE</p>
    </div>
</div>

• 初期表示するコンテンツには、class="select"を指定しておきます。
• ※装飾部分は省略しています

【パターン2】 アンカーリンクでコンテンツに移動するパターン

javascript

javascript：アンカーリンク

<script>
    $(function() {
        // #で始まるアンカーをクリックした処理
        $('a[href^=#]').click(function() {
            var headerHight = 68; // 固定ヘッダーの高さ
            var speed = 400; // スクロールの速度ミリ秒
            var href= $(this).attr("href"); // アンカーの値取得
            var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を取得
            var position = target.offset().top-headerHight; // 移動先を数値で取得
            $('body,html').animate({scrollTop:position}, speed, 'swing'); // スムーススクロール
            return false;
        });

        // ヘッダーを固定
        var bt = $("#nav").offset().top; // ページ上からの距離を取得
        var ds = 0;

        $(document).scroll(function(){ // スクロール発生時の処理の記述を開始
            ds = $(this).scrollTop(); // スクロールした距離を取得
            if (bt <= ds) {  // スクロール距離がnavの位置を超えると
                $("#nav").addClass("follow"); // classを追加
            } else if (bt > ds) { // スクロールがページ上まで戻ると、
                $("#nav").removeClass("follow"); // classを削除
            }
        });
    });
</script>

• タブ<a>をクリックすると、アンカーリンク先の値を取得し、コンテンツ上部まで移動します。また違うタブ<a>をクリックすると、別のコンテンツの上部に移動します。
• スクロールイベントが始まると、スクロールした距離を取得します。ヘッダーの距離まで移動すると、id="nav"にclass="follow"が追加され、position: fixed; top: 0;が付与され固定されます。スクロールがヘッダーより上に戻ると、id="nav"のclass="follow"が削除され、固定されなくなります。

Sass

Sass

// ナビの高さ
$navi_height: 68px;

.body {
    position: relative;
    // ナビ
    .tab__block {
        position: absolute;
        top: 0;
        box-sizing: border-box;
        width: 100%;
        height: $navi_height;
    }
    // コンテンツを囲む
    .wrap {
        padding-top: $navi_height;
    }
}

// スクロールで付加される
.follow {
    position: fixed! important;
    top: 0! important;
    z-index: 10;
    width: 100%;
}

• $navi_heightにナビゲーションの高さを指定します
• ※装飾部分は省略しています

HTML

html5：アンカーリンク

<header><!-- メインビジュアルはこの位置 --></header>
<div class="body" id="top">
    <div id="nav" class="tab__block">
        <ul>
            <li class="tab"><a href="#AAA">AAA</a></li>
            <li class="tab"><a href="#BBB">BBB</a></li>
            <li class="tab"><a href="#CCC">CCC</a></li>
            <li class="tab"><a href="#DDD">DDD</a></li>
            <li class="tab"><a href="#EEE">EEE</a></li>
        </ul>
    </div>
    <div class="wrap">
        <div id="AAA" class="content">
            <p>AAA</p>
        </div>
        <div id="BBB" class="content">
            <p>BBB</p>
        </div>
        <div id="CCC" class="content">
            <p>CCC</p>
        </div>
        <div id="DDD" class="content">
            <p>DDD</p>
        </div>
        <div id="EEE" class="content">
            <p>EEE</p>
        </div>
    </div>
</div>

• ※装飾部分は省略しています