やりたいこと
親要素→ display:flex;
子要素→ 左右に分けて、片方は記事内容、もう片方はサイドバー
→サイドバーの方をスクロールと一緒に、下に追従するようにしたい
方法
.side-menu{position:sticky;top:150px;}サイドバーの要素にこちらのstyleを当てるだけ。
スクロールしても、上部から150pxの場所に固定されます。
ただ、position: sticky;が反映されなかったので、私が試した方法が以下の通りです。
overflow属性の存在を確認
ほとんどの原因がこれかと思います。
position: stickyの祖先に、overflow属性(overflow、overflow-X、overflow-Y)がvisible以外で指定されてる事です。
祖先は、「対象要素の親、そのまた親、…」など、全ての親要素を含みます。
①jsを使用して確かめる
効かない理由がoverflow属性であるかどうかを、JavaScript(jQuery)を使用して確かめます。
以下のコードでoverflow属性値をvisibleに変更しています。実行後にstickyが正しい挙動になる場合、overflow属性が原因である事が分かります。
$(".side-menu").parents().css("overflow","visible")②サイドバーの高さを確認
サイドバーの高さがメインコンテンツの高さと同じだと、スクロール時にサイドバーが追従しません。
今回、サイドバーに背景色があったので、高さが同じでは無い事は理解してましたが、一応試しました。
(ここの確認でデベロッパーツールを使用しましょう)
・align-items: baseline;をFlex-boxの親要素に設定
・position:stickyを指定している要素にcssalign-self: baseline;を指定して元の要素の高さになるようにする
こちらを試しましたが、ダメでした。
原因
結果的に何が原因だったかというと
"reset.css"のせいでした！！！
reset.cssにはhtml要素(全体)に
overflow-y: scroll; /* All browsers without overlaying scrollbars */
がかかってしまっているので、position: stickey;が効かなかった。
私は普段sanitize.cssを使用していて、ローカル環境ではposition: sticky; が反映されいてたのに対し、
他の人が作成したサイトのページ改修で、同じコードを挿入したら反映されなかったので原因が不明で苦戦しました。
reset.cssは便利ですが、予想もしてないstyleが当たっている時があるので注意してください。
position: sticky; はIE11に対応してないらしいです。。。
早くIEがなくなりますように。。。
参考リンク
https://termina.io/posts/position-sticky-and-overflow-property
https://cheat.co.jp/blog/archives/1896