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

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

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

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

マジで簡単です。

 

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

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

 

スポンサーリンク

デモページ

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

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

デモページ はこちら↓。CSSしか使っていません。

デモページ

 

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

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

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

 

たったこれだけです。

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

 

スティッキーヘッダーを作る際の注意点

1. IEでは使えない

CanIuseでposition: sticky;を見てみるとIEでは使えないことがわかります。

potision: stickyはieでは使えない

IEにも対応させる必要がある場合、positioin: sticky;IEでも使えるようにするポリフィルが用意されているので、それを使う必要があります。

もしくはjQueryで作ってしまう方が確実かもしれません。

 

2.入れ子の要素に指定しない

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;が動作しない場合はこれが原因だと思うので気をつけてください。

 

3.overflow: hiddenを使わない

position: sticky;は親要素にoverflow: hidden;が指定されていると動作しません。

特にreset.cssやオリジナルのスタイル打ち消しファイルを使っている人は気をつけてください。動かない場合はこの辺を疑ってみるといいと思います。

 

まとめ

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

IEでは使えないという制限がありますが、そこさえ気をつければかなり実用的です。

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

スポンサーリンク
CSS
スポンサーリンク
でざなり