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