More than 5 years have passed since last update.

position: stickey;が効かない理由

Posted at 2020-04-13

やりたいこと

親要素→ display:flex;
子要素→ 左右に分けて、片方は記事内容、もう片方はサイドバー

→サイドバーの方をスクロールと一緒に、下に追従するようにしたい

style.css

.side-menu {
  position: sticky;
  top: 150px;
}

サイドバーの要素にこちらのstyleを当てるだけ。
スクロールしても、上部から150pxの場所に固定されます。

ただ、position: sticky;が反映されなかったので、私が試した方法が以下の通りです。

ほとんどの原因がこれかと思います。

position: stickyの祖先に、overflow属性(overflow、overflow-X、overflow-Y)がvisible以外で指定されてる事です。

祖先は、「対象要素の親、そのまた親、…」など、全ての親要素を含みます。

効かない理由がoverflow属性であるかどうかを、JavaScript(jQuery)を使用して確かめます。

以下のコードでoverflow属性値をvisibleに変更しています。実行後にstickyが正しい挙動になる場合、overflow属性が原因である事が分かります。

script.js

$(".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がなくなりますように。。。