15
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

position:fixedによる画面位置固定が出来ない、そんなときもあるよね。

Last updated at Posted at 2016-11-17

おや、サイドナビゲーションの位置固定ができないぞ?

みたいな事態、たまに起きるんです。まあ起きてたんですよね。私の周りでも。
ちょっとしたあるあるなのでメモ残しておきます。

position:fixedを使いたい理由

position:fixedの最大のメリットは画面位置に対しての絶対座標指定で手軽に固定出来ることですが、何よりスクロールイベントを見て位置を修正し続けるといった事をする必要もなく低負荷です。かつてはiOSなどのモバイルブラウザで使えなかったのですが、今となっては使えるのでハンバーガーメニューの固定などに使います。

まあそもそもヘッダ等の固定の是非というものはあるのですが(実のところ、私はグローバルナビゲーションを追従する仕様は否定的に見ています。回遊率を上げるためと言われますが、それに寄与しているとも思っていません)、この要件は非常にありがちな為position:fixedは度々こういった用途に用いられます。

position:fixedが使えない状況

position:fixedは親要素からの位置を取得したりといった事を行いません。あくまで画面に対しての絶対位置指定です。親がrelativeだろうがabsoluteだろうが使えるものです。
が、ひとつ大きな例外があります。

親要素にtransformを掛けられている場合です。

あれ?別になんの変形も指定してないし、特にそんな様子もないけど、fixedが効かなくなっちゃってるよ?って?
そうだよね、だから悩んでるんだよね、きっと。

仕様的なところは多分この辺読んだら出てくるのかな?面倒だからそこまで追いかけてない。暇なら読んでちょ。

なぜtransformが掛かってるの?

実はtransformには変形以外の使い方としてtransform3d指定を付けることでその要素のレンダリングをGPU任せに出来るという一種のパフォーマンスチューンに使われる一面があります。
こいつが曲者で、たしかにハンバーガーメニューなどで画面の押し出しをしたい場合などに使いたくなるんですが、反面こいつを掛けることでposition:fixedが効かなくなります。これ知らずにやっちゃって僕も割と面倒な事になった淡い記憶があります。

要するに何らかのJSだったり、jQueryプラグインだったり、CSSライブラリが知らぬ間にtransformを掛けてる場合があるわけです。特にサイドからドロア出すやつとかな!やつとかな!やつとかな!(大事な事なのでs

まとめ

結局のところ拾い物のコードは注意しましょうとしか言えないです。DOMを操作してしまうJSはどうあがいてもドキュメントに何らかの影響を及ぼします。コードを全部読めとまでは言わなくても、明らかにCSSを操作しているような箇所なんざは軽く検索して見つけれたりしますんで、拾い食いは慎重にしましょう。(このケース、何度か見てるんですが、大体拾い食いのせいです)

15
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?