皆さん、こんにちは。
制作部の関です。
今回は「position:sticky;とoverflow:hidden;の関係について」のお話をします。
画面幅より大きいものがあるために、左右がぐらついてしまう際に
以前,「overflow:hidden」を全体にかければ問題ないということを知ったので、今回試してみると
position:stickyの部分が正常に動かなくなってしましまいました。
cssで追従させたい要素に対して使う「position:sticky」ですが、
親要素に「overflow:hidden;」が適用されていると、position:stickyの部分が正常に動かなくなってしまうようです。
よくbodyやmainタグに「overflow:hidden;」を付けているので、困りました。。。
そこでこの件について調べたところ、
【「overflow:hidden」の場合は、そもそも「sticky」が効かなくなります。】
↑とのこと。。。！
全体ではなく部分部分にコーディングしたところ、問題なくposition:stickyを付けることができました。
以上、制作部の関でした。