cssだけでスティッキーヘッダーなどにも対応できるposition:sticky
ある要素の高さまでスクロールしたら以降はそのまま指定した位置に表示したい
要素の位置を調べて…スクロール量を監視して…cssを変更できるよう工夫をして…
jsを使って対応していました。
CSSでも対応可能になっていますので紹介します
この記事の目次
position:sticky;
Googleさん曰くスティッキーと読むそうです
このプロパティ値を設定すると要素の高さまでスクロールした際に指定したpositionにfixedしたときと同じ効果を持たせることができます
この効果は親要素の高さ内でのみ効きます
範囲限定型fixedといえるのかな？と思います
ブラウザの対応状況
chromeやFirefoxでは問題なく使えますがマイクロソフト系がイケてません
今すぐ使うのはちょっと考え物かもしれませんが、今後に期待が持てる高機能です
マイクロソフトなんか無視という剛の者であればガンガン使っていきたいのではないでしょうか
使い方
親要素の中で固定したい要素に対してposition:sticky;を付けてあげる
親要素の中で固定したい位置にtop・bottom・left・rightを使って座標を設定するだけ
※注意しないといけない点としてはある程度親要素の高さがないとほとんど意味がないのでうまくいっているのかがわかりにくいです
|
1 2 3 4 5 6 7 8 |
<section> <h1>stickyテスト</h1> <p>テストで使うため色々なsticky画像を集めてみました</p> <div><img src="img1.jpg" alt=""></div> <div><img src="img2.jpg" alt=""></div> <div><img src="img3.jpg" alt=""></div> <div><img src="img4.jpg" alt=""></div> </section> |
|
1 2 3 4 5 |
p{ background-color: #fff; position: sticky; top: 0; } |
今回はｐタグに使ってみました
このコードを実行するとpタグがブラウザ最上部にくる位置までスクロールすると
親要素内であれば、どれだけ下にスクロールしても指定したtop0の位置に居続けます
これだけだとわかりにくいと思うので簡素ながらサンプルを作りました。ご覧くださいです
サンプルページ
stickyテスト
上のコードプラスαで作っています
下までスクロールすると元に戻ることが確認できます
重ね重ねになりますが対応しているブラウザの都合上使いにくいですが、とても便利で面白いので 機会があれば使ってみたいプロパティ値のひとつですね
