【jQuery不要】CSSだけ！途中から追従するスティッキーヘッダーを簡単に作る方法（サンプル付）

スティッキーヘッダーはjQueryで実装するのが定番ですが、知らない間にCSSだけでも簡単に作れるようになっていたみたいなので紹介します。

最初から上部に固定されているスティッキーヘッダー ではなく、途中から固定されるスティッキーヘッダー です。

※マジで簡単です

なお、jQueryを使えば途中でスティッキーヘッダー をコンパクトに変化させることもできます。

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

「スティッキーヘッダーにしてみたけど大きすぎて結構邪魔だな...途中でコンパクトに変わるようにしたいな」 そんな人のために今回はjQu...

dezanari.com

デモページ

スティッキーヘッダー は、画面の上部に固定されてスクロールしても付いてくるヘッダーのことです。

ユーザーの利便性が高まりますがうっとおしいと思う人も少なからずいるので、実装する場合は高さを低くするなどの工夫が必要です。

CSSだけでスティッキーヘッダーを作る方法

スティッキーヘッダー にしたい要素に以下のCSSを記述します。

position: -webkit-sticky;
position: sticky;
top: 0;

たったこれだけです。

Safariではベンダーインプレックスがないと動作しないので気をつけましょう。

注意点

position: stickyは入れ子の要素に適用してもスティッキーヘッダー として動作しません。

例えば以下のような書き方だと動作しません。

<header>
    <div>
        スティッキーヘッダー 	
    </div>
</header>

div {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

子要素に適用するのではなく、親要素に適用しましょう。

<header>
    <div>
        スティッキーヘッダー 
    </div>
</header>

header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

position: sticky;が動作しない場合はこれが原因だと思うので気をつけてください。

まとめ

jQueryが扱えなくてもCSSだけで途中から固定されるスティッキーヘッダー が作れるようになりました。

コードもかなり簡単なので、機会があったら使ってみるとおもしろいと思います。