SakuraWi - BLog

みんなのウェディングのエンジニア。聴いたお話をまとめておく倉庫的な。スタックストックスタック!

スクロールによってヘッダーやフッターを固定するためのcss position stickyが便利


どうも、櫻井です。

最近position stickyなるものを知りまして、これがまた便利だなと思って共有するための記事を書きました。

概要

この方の記事がめちゃめちゃわかりやすいです。 動画もついているし、デモ用のコードがくっついているので。

position: stickyの面白い使い方と使用時の注意点 | Rriver

使い方

親要素の構成によるところがありますが、基本的に

.sticky-class {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
}

こんなのでいけちゃいます。

ポイントはposition: stickyで指定する部分と、topやbottomなどの指定があるところですね。 top: 0にすると上でひっかかって、 bottom: 0とかにすると下でひっかかるイメージです。

position: -webkit-sticky;はsafariに対応するためのものになります。iOSなど想定が多いなると必須かと思われます。

注意点

2018/5時点では、IE11には対応していないみたいです。

そのため利用する際は注意が必要ですね。 モバイルでの利用想定などであればそこまで問題なさそうです。

Can I use... Support tables for HTML5, CSS3, etc

ブログとかにもどんどん使っていきたいcssだなぁと。