[CSS] position:sticky;が効かない原因（2024年編）

仕事でホームページを作成している時に、stickyを使ってページの表示効果をコントロールする仕様でいい感じにやっていたら、 ある日突然、stickyが効かなくなりました。 ついさっきまで動いていたのに、何故か突然動かなくなりました。 色々調べたところ、いくつかのやっちゃいけないポイントがあったので、今後のために備忘録しておきたいと思います。

親要素のoverflow-x:hidden;が原因

そうなんですよ、直前に行った作業をずっと追っていってチェックしていたら、 スマホで画面の横ずれが発生するので、親要素に"overflow-x:hidden;"という、横ずれ防止のおまじないを入れたのが原因でした。 どうやら、stickyを使う要素の親に、この命令が入っているとstickyが機能しなくなるようです。 そのさらに親要素にセットしなおしたところ、問題なく動作するようになって、これはブログで報告せねばと思い、備忘録しておくことにしました。 上位要素全てにoverflowを使うと、stickyが効かなくなると書かれているサイトもありましたが、直親要素じゃ無くしたら、ちゃんと聞くようになったので、なんで？！という思いでいっぱいです。

inlineはご法度

他サイトで一番良く見かけたのが、stickyを設定しているエレメントのdisplay設定で、inline系(inline-flexやinline-blockなども含む）をセットしていると、stickyが動作しなくなるとのことでした。 でも、コレ、やってみたら、全然動くんですけど・・・ どうやら、inlineをstickyを使ってはいけないは、都市伝説だったようですね。 一応、safariブラウザ（iphone含む）をチェックしましたが、ちゃんと動作していました。

stickyの使い所

stickyを良く分からない人がこのブログを読んでいるとは思えませんが、とりあえず、簡単に説明すると、 ホームページで、画面がスクロールする時に、画面の上部（特定の場所）で、その要素だけスクロールしないように固定してくれる機能です。 display:fixedが、画面固定をしてくれるのとどう違うのかと言うと、fixedは、常に画面固定されるのに対して、stickyは、画面に現れるまでは、普通にスクロールしてくれて、その座標に達したら画面固定してくれます。 サイドメニューなどで使われているのを良く見かけますね。 ちなみに、ユゲタが今回使ったのは、ホームページ全体がスクロールするサイトを作ったんですが、背景は通常スクロールするけど、コンテンツはちゃんと画面に留まって文章を見せるという効果で使ってみて、クライアントさんにとても喜んでもらいました。 サイトが公開したら、ブログで紹介したいと思いますね。

参考

リファレンスサイト : https://developer.mozilla.org/ja/docs/Web/CSS/position MYNTブログ : [CSS] webページの特定要素内に対してFixed（位置固定）させるstycky機能を理解する話