2017-5-20

[CSS]position:stickyを試してみた

結論

• IE11,Edge が非対応なため、sticky 的な挙動が必須要件の場合は JS でやったほうがいい。「メジャーなブラウザで sticky 的な挙動してくれたらユーザビリティ的にありがたいよね」程度の物に関しては手軽に実装出来るので良い。
• Safari 用にベンダープレフィックスが必要
• iOS(10.3.1)の Safari において、sticky な要素のコンテナが table-cell の場合動作しなかった。よくあるサイドバーとかに sticky 使う場合は、flex を使ってコンテナをレイアウトする等の対策が必要。

詳細

もう結論でほとんど必要なことは書いたけど、

Demo 1

デモを見れば一目瞭然。前述の通り、コンテナが table-cell だと sticky が動作しなかったため、サイドバーとメインのレイアウトは flex で実装している。

Demo 2

こちらが table レイアウトで実装したもの、iOS で見ると動作しないはず（バージョンアップで修正される可能性はあるけど）。