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 で見ると動作しないはず(バージョンアップで修正される可能性はあるけど)。