ワードプレスにて。
自分が作っていないテーマでstickyを使おうとすると、だいたいの確率で使えないの。
なぜならば、祖先要素にoverflow:hiddenが使われているから。
じゃあもう祖先要素に、overflow:visible; 上書きしちゃえばいいじゃんって思うんだが
自分で作ってないテーマってどこで不具合発生するか分からない。
ってかそこにhidden使われてる意味が絶対あるはず。
でもどうしてもstickyが使いたいよ？
固定ヘッダーや追従ボタンを作成するときに、一番手っ取り早く簡単素敵なstickyさんですから、どうしても使いたいんだー！！
ッというときに見つけたのがこれ。
overflow: clip;
overflow: clipの特徴は
① コンテンツを要素のパディングボックスに合わせて切り取る
② プログラム的なスクロールも含め、全てのスクロールを禁止する
③ overflow-xまたはoverflow-yを使用して1つの軸にクリッピングを適用することができる
ということで、hiddenでもボックスに合わせて切り取るのは同じなんだけど、clipにするとstickyが使えるようになると。
こちらのサイトを参考にさせてもらいました。
「body {overflow-x: hidden}したいけど、bodyの子孫要素にposition: stickyを使いたい」
まさにそれなすぎてありがとうございます。
そんな時に、
body {overflow-x: hidden} → body {overflow-x: clip}
にするだけで一発解決なわけです！！！
現時点での対応ブラウザはこちら
これ苦しめられてる人多くないかな〜
すごいググってるのにぜんぜんsticky使えないじゃん！！！！
ってことがなくなりますように。笑