先に結論：nuxt.config.jsに下記のように書くことでposition:sticky;が効くようになります
nuxt.config.js
bodyAttrs: {
style: 'overflow: unset!important;'
},
注意点
逆にbodyにoverflow: hidden;などを当てたいときに困ります。特にモーダルとかの実装。htmlにoverflow: hidden;を設定するなどの副次的な対応が必要になると思います。
ということは、この対応法は少なくともBestな方法ではないので、他の方法があればご教授いただければ幸いです。
さて、上記でstickyが動くようになった場合、なぜそれで直るのかも一応知っておいたほうがよいかもしれないので、書いておきます。
前提１：stickyしたい要素の親にoverflowの値が設定されているとstickyが効かなくなる
なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先 (overflow が hidden, scroll, auto, overlay として作成されたもの) に「粘着」します。これによって「粘着」のふるまいを効果的に抑止します (GitHub issue on W3C CSSWG を参照)。
position - CSS: カスケーディングスタイルシート
前提２：bodyにoverflowの値がstyleで指定されている
前提１を踏まえてposition: sticky;を適用した要素の親をブラウザで順番に見ていくと、なんとbodyが下記のようになっていました。
style
body {
overflow: scroll!important;
}
このとき厄介なのがstyleによって指定されていることです。このことが意味するのは、CSSの上書きでは十中八九打ち勝てないことを意味しています。ご丁寧に!importantまでされていますので、それはより濃厚です。実際、nuxt.config.jsを編集し、bodyにclassを指定し、それによってこのoverflowを上書きすることも試しましたが無駄でした。
nuxt.config.js
bodyAttrs: {
class: 'overflow-unset'
},
// この場合、classは当たるが、styleには打ち勝てない
ということで、nuxt.config.jsでbodyにstyle属性値をセットすることで無理やりstickyを動作させるというtipsでした。
↧