【CSS】position: sticky;

今回は「position: sticky;」をご紹介します。

「position」というと…
static、relative、absolute、fixed が一般的に使用されますが、比較的新しいpositionの値に、「sticky」が追加されております。
（新しいとは言っても、数年前ですが…(^▽^;)）

これがどういうものなのか…百聞は一見に如かず。
サンプルHTMLをご覧ください。
https://revenue-test.biz/test_html/position-sticky.html

以前はJavascriptでしかできなかった、
「一番上に行くと固定表示する」
的な動きを、CSSのみで可能にした機能なんです。

やり方は簡単。

position: sticky;
top: 0;

を追加するだけです。
（場合によっては、top: 50px とかにすれば、その位置に固定できます。）

一番最初にこれを実装したのは（私の記憶に間違いがなければ）FireFoxでした。
chromeやEdgeでは、だいぶ後発で実装されました。
WindowsのSafariは、2012年で更新が止まっているので、実装されていないと思います。
なので、長いこと同様の処理はJavascriptで対応しておりました。

最初から一番上に固定するだけなら、position: fixed; でも対応できるんですが、サンプルのようにちょっとスクロールさせてからの固定は、Javascriptでスクロール量を測定して、ヘッダーの位置が画面の一番上に来たらCSSをposition:fixed; に変更する、というちょっと重くなる処理をしなければならず、これをCSSで実装できるとなると、ページも多少は軽くなるのではないかと思います。

もちろん、ヘッダーのみに使用するだけでなく、サンプルのようにパララックスサイトみたいな使い方も可能です。
（パララックスサイトは、コンバージョンを下げる＆離脱率を上げる、という結論が2015年あたりにアメリカで出ておりますので、あまりお勧めはしませんが…全体的に使わずとも、一部に効果的な使い方ができる場合もあると思います。）

これ、他には<table>でも使用可能で、こちらの使い方は次回にご説明させていただこうかと思います。
（これがめっちゃ便利なんです♪）