[lang='ja'] もう position sticky だけで良いと思います

DesignChips — Fri, 17 Nov 2017 01:01:49 +0000

はじめまして

dev.to初投稿。

position: sticky;について

2017/11/17現在、Can I use...で確認したところ、IE11, Edge15以前、Androidの古いブラウザでは動作しない。また、ChromeやFirefoxでもtable要素関連の追従はサポートされていない。

CSSとJavaScriptでのSticky

ポリフィル（ex. stickybits)を使えばJavaScriptによって追従させることができる。

しかし、position: sticky;によって追従させるのと、JavaScriptによって追従させるのでは、少し表示に差が出てしまう。

アニメーションが滑らかでない

JSで追従を実装した場合は、positionプロパティの値が、JSから変更される。

(how-to-achieve-60-fps-animations-with-css3)[https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108]で言われているように、transformとopacity以外で要素を動かすと、滑らかな（60fpsに近い）アニメーションにはならない。

JSで実装している場合、端末にもよるとは思うが、持っているAndroidや周りの人のスマホで確認してもらった結果、positionプロパティの値を切り替えるタイミングで少しガタつきが発生している。PCでも操作スピードによっては一瞬ガタつく。

個人的にはけっこう気になるし、気になってしまう可能性があるものをわざわざ実装したくはない。

そもそも追従は必要なのか

position: sticky;が効かないブラウザのために、わざわざJSで追従する必要はあるんだろうか。アニメーションは滑らかじゃないし、そもそもJSを読み込む必要があるのでJSが実行されるまでは追従できないし。。。

しかもだいたいにおいて、追従している要素ってヘッダーだったりする。スマホの場合は特にそうだが、メインコンテンツが表示される領域を小さくしてまでヘッダーを追従させる意味なんてほとんどないんじゃないのか。例えば、コンバージョンにつながるボタンがヘッダー内にあって、それを見せ続けるために追従させたい、というのであればまだわかる。

でもロゴとメニューしか入っていないヘッダーを追従させているのはどうなの。そのためにJSで実装している時間がもったいないし、もっと他に重要なところあるでしょ、と思う。

Progressive CSS

これは造語ですが、position: sticky;に対応しているブラウザは追従する、対応していないブラウザは追従しない、でいいと思っている。@support (position: sticky;) {} 使えばスタイルの分岐もできるのでそんなに気にしなくていいと思う。

sticky以外にも言えるかもしれないが、それほど重要でないことのために、わざわざポリフィル探してきて、古いブラウザで確認してまで実装する意味はそんなにないと思うし、どんなブラウザでも見た目と挙動を同じにしないといけないと思っているのは、おそらく実装している側だけ。

結局のところ自分が持っているブラウザでしか見ない。少なくとも自分は、自分が作っているサイト以外を複数端末で確認するなんてことはまずない。

機能が破綻していたり、よっぽど見た目が崩れなければもう古いブラウザは対応せずに、積極的に新しい書き方に寄せていくべきじゃないだろうか。