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