【JavaScript】スクロールで追従してくるスティッキーヘッダーの実装方法

スティッキーヘッダーとは、スクロールしても画面にくっついてくるヘッダーのことです。
最初から終始くっついてくるものはJavaScriptは不要ですが、

一定量スクロールして初めて追従してくるヘッダー
一定量スクロールするとちょっと高さが変わるヘッダー

なんかにはJavaScriptでの制御が必要になってきます。

今回はそんなスティッキーヘッダーの仕組みから説明していきますが、せっかちさんはサンプルコードだけコピペして使いまわしてもOKです。

サンプルコードの使い方
スティッキーヘッダーの仕組み
スティッキーヘッダーを体験しよう
スティッキーヘッダー実装！サンプルコードを使いまわす方法！

サンプルコードの使い方

コード右上のアイコンをクリックすることでコピーできます。
全てのサンプルコードは、空のhtmlファイルにコピペするだけで結果を確認することができます。

それでは本文へ、レッツゴー！

スティッキーヘッダーの仕組み

今回は、ヒーローイメージ（メイン画像）がスクロールして消えた段階で出現するヘッダーを作成しました。

getBoundingClientRect().bottomを使うことで、ヒーローイメージの最下部が消えた時点でイベントが発火するようになっています。

イベントが発火すると、スティッキーヘッダーに .on というクラスが付与され、出現するような作りになっています。
逆にヒーローイメージが再度画面に現れると、 .on が消え再び消えます。

getBoundingClientRect().bottomは、画面最上部から指定した要素の最下部までの距離を取得します。
詳しくは別記事にて紹介していますので、そちらをご一読ください。
getBoundingClientRect().bottomについて

スティッキーヘッダーを体験しよう

下記を丸ごとコピペしてプレビューを見てみましょう！

<style>
#sticky_header {
    height: 100px;
    width: 100%;
    background-color: #ccc;
    text-align: center;

    position: fixed;
    top: 0px;
    left: 0px;

    z-index: 999999;

    transform: translateY(-100%); 
    transition: all .2s;
}

#sticky_header.on{
    transform: translateY(0px);
}
</style>

<body>
    <!-- スティッキーヘッダー本体 -->
    <div id="sticky_header">sticky_header</div>
    
    <!-- 体験のためのサンプルメイン画像 -->
    <div style="height: 400px;background: skyblue;text-align: center;" id="sticky_point">mainimg</div>

    <!-- 体験のためのサンプルコンテンツ -->
    <div style="height: 2000px;text-align: center;">Content</div>

<script>
const stickyHeader = document.querySelector('#sticky_header');
const stickyPoint = document.querySelector('#sticky_point');  

window.addEventListener('scroll', ()=>{
    const stickyPointHeight = stickyPoint.getBoundingClientRect().bottom;

    if(stickyPointHeight < 0){
        stickyHeader.classList.add('on');
    }else{
        stickyHeader.classList.remove('on');
    }
});
</script>

それでは、いざ使いまわしていきましょう。

スティッキーヘッダー実装！サンプルコードを使いまわす方法！

① まずはスティッキーヘッダーを準備する

実装したいスティッキーヘッダーを自由に作っておきましょう。
CSSでの装飾は後からでもOKです。

作ったスティッキーヘッダーに#sticky_header（id=”sticky_header”）を付与します。

② スティッキーヘッダーが発火するポイントを準備する

発火してほしいポイントに#sticky_point（id=”sticky_point”）を付与します。

ヒーローイメージが画面から消えてから発火させたい場合、ヒーローイメージに付与するといった感じです。
発火ポイントが画面から消えてから発火することに注意！

③ CSSとJavaScriptの記述をコピペする

サンプルのCSSとJavaScriptのコードを、実装したいファイルの所定の位置へ貼り付けます。
コピペ場所は自由ですが、style.cssやmain.jsといった場所です。

トップページだけに実装したい場合はトップのHTMLファイルに直貼りしてもOKですが、全ページで実装したい場合は、共通のjsファイルに貼り付けた方がベターです。

再度、CSSとJavaScriptの記述を抜き出して貼り付けておきます。

CSS

既にスティッキヘッダーをCSSで装飾している場合、ダブっている記述は消してください。
まだの場合は、ここに追加で書き込んでいきましょう。

z-indexの値には注意！追従してくるので、他の要素と干渉してきます。
通常一番上にいるスティッキーヘッダーですが、z-indexの値をミスると、要素の下をくぐっていったりしてしまいます。

#sticky_header {
    height: 100px;
    width: 100%;
    background-color: #ccc;
    text-align: center;

    position: fixed;
    top: 0px;
    left: 0px;

    z-index: 999999;

    transform: translateY(-100%); 
    transition: all .2s;
}

#sticky_header.on{
    transform: translateY(0px);
}

JavaScript

ここは特に触らなくて問題ありません。
id名やclass名を変更したい場合は、そこだけ書き換えてください。

const stickyHeader = document.querySelector('#sticky_header');
const stickyPoint = document.querySelector('#sticky_point');  

window.addEventListener('scroll', ()=>{
    const stickyPointHeight = stickyPoint.getBoundingClientRect().bottom;

    if(stickyPointHeight < 0){
        stickyHeader.classList.add('on');
    }else{
        stickyHeader.classList.remove('on');
    }
});