WEBサイトを見ていると例えばスクロールをしたときにヘッダーが追従してくる、といった動作はよく見かけると思います。
だいたいposition:fixed;等のcssとjs等の組み合わせをしていることが多いと思いますが、cssでposition: sticky;を使うとすぐに実現できます。
ヘッダーを追従させてみる
実際の画面をとりあえず見ていただくと早いかと思います。
DEMO
DEMOを見ていただくとわかりやすいですが、スクロールをするとヘッダーがついてくるようになっています。
コードは以下のようになります。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<main> <header> <p>ここがヘッダー</p> </header> <div class="contents"> <p>ここがコンテンツ</p> </div> <footer> <p>ここがフッター</p> </footer> </main> |
CSS
|
1 2 3 4 5 |
header { position: -webkit-sticky; position: sticky; top: 0; } |
単純に追従する要素に対して『position: sticky;』と『top: 0;（上部に固定する）』を指定します。
Safari用には『position: -webkit-sticky;』のようにプレフィックスの記述になるのでお忘れなく。
フッターも追従させてみる
フッターも追従させることができます。
DEMO
CSS
|
1 2 3 4 5 |
footer { position: -webkit-sticky; position: sticky; bottom: 0; } |
ヘッダーとはちがい、下の方で追従させるので『bottom: 0;』と指定してください。
これで下の方で付いてきて、フッターが通常の位置にくると追従をやめます。
パララックス的な表現をしてみる
position: sticky;のおかげで、パララックス的な表現も簡単にできるようになります。
DEMO
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<main> <div class="contents"> <p>コンテンツ1</p> </div> <div class="contents"> <p>コンテンツ2</p> </div> <div class="contents"> <p>コンテンツ3</p> </div> <div class="contents"> <p>コンテンツ4</p> </div> </main> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.contents{ background: #f2f2f2; height: 100vh; position: -webkit-sticky; position: sticky; top: 0; display: flex; justify-content: center; align-items: center; } .contents p{ color: #ffffff; font-size: 30px; text-align: center; } .contents:first-of-type{ background: #CF7DB0; } .contents:nth-of-type(2n){ background: #4EB3B8; } .contents:nth-of-type(3n){ background: #5BB757; } .contents:nth-of-type(4n){ background: #5F72BC; } |
パララックスの表現をさせたい要素にstickyとtopを付けるだけです。
昔は色々と調整していたのですが、こんなにあっさりできるとびっくりですね。
ブラウザの対応状況
最新バージョンのChrome・Firefox・Edge・Safariに対応しています。IEが対応していなかったため今まで使用していなかったのですが、そろそろIEも使うことができないのでもっとこのプロパティを使っていきたいですね。
Can I use
