【CSS】stickyを使用してヘッダーを固定する

Webサイト制作において、依頼されることが多い「ヘッダー固定」。 かつてはJavaScriptでスクロール量を計算し、クラスを付け替えて position: fixed を当てる手法が主流でした。

しかし、2026年現在のモダンコーディングでは、CSSの position: sticky を使うことで、よりスマートかつパフォーマンスに優れた実装が可能です。

なぜ position: fixed ではなく position: sticky なのか？

JavaScriptを使用しないのでパフォーマンスへの影響などがありますが、コードの簡略化として、position: stickyを使用しています。

【実装例】CSSだけで固定する

まずは、JSを一切使わずにヘッダーを固定するコードです。

header {
    position: sticky; /* これだけで固定完了 */
    top: 0;           /* どこで止めるかを指定 */
    width: 100%;
    background: #fff;
    z-index: 999;
}

これだけで、要素が画面上端に到達した時点でピタッと固定されます。要素が浮かないため、背後のレイアウトが崩れる心配もありません。

【応用】スクロール時だけ「影」をつける

「固定はCSSでやるけれど、スクロールした時だけ背景色を変えたり影をつけたりしたい」という要望も多いですよね。その場合は、JSでクラスの付け替えだけを行います。

スクロール量が少しでも（例えば1px以上）発生したら、装飾用のクラス .is-scrolled を付与します。

$(function(){
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) { // 100px以上スクロールしたら
            $('header').addClass('is-scrolled');
        } else {
            $('header').removeClass('is-scrolled');
        }
    });
});

影（box-shadow）の処理を別クラスで定義します。

.is-scrolled {
    /* 影 */
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, 
                rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

まとめ

• ・「固定する」という機能：CSSの position: sticky で実装
• ・「見た目を変える」という演出：JSでクラスをコントロール。

このように役割を分けることで、コードはよりシンプルになり、SEOやページ表示速度（LCP）にも良い影響を与えます。

「昔のコードを使い回しているな」と感じたら、ぜひこの機会に Sticky + 装飾用JS のハイブリッド構成にアップデートしてみてください。