サイドバーのカテゴリーやメニューをスクロールしても固定させたいとき、position:sticky;が便利なんだけどなぜか効かない！？
そんなときは、親要素や先祖要素にoverflow: hidden;が使われている可能性がある。
削除できるなら削除しする。
これでposition: sticky;が効くようになる。
目次
どうしてもoverflow: hidden;を使わないと画面からはみ出る要素があるし・・・
という場合は、overflow: hidden;の代わりにcontain: paint;を使うのも手だ。
contain: paint;は、
その要素の子孫を、境界の外に表示しないことを示します。包含ボックスが画面外の場合、ブラウザーは中の要素を描画する必要はありません。 — そのボックスに完全に含まれていれば、やはり画面外にあるからです。そして、子孫が包含要素の領域を溢れている場合、子孫は包含要素の境界ボックスで切り取られます。
mdn web docs 「contain」より引用
とのことで、はみ出したくないな〜っていう要素があるときに使える。
これでoverflow: hidden;を使わずposition: sticky;が使えるようになる。
私はよくはみ出すアニメーションを使ったりするので、全体に.wrapというclassで箱作ってoverflow: hidden;使ってることが多いから、たまにposition: sticky;を使うと「効かない（泣）」となる。よく忘れるので備忘録としてここにメモしておく。
contain: paint;使ったら今度は「position:fixed」が効かなくなった（泣）
position: sticky;は効くようになったが、今度はheader固定してたposition:fixed;が効かなくなってしまった。
ということは、全体wrapにoverflow: hidden;やcontain: paint;をかけて、全体的にはみ出さないようにという手はあまりよろしくないのかもしれない。
position: sticky;を使うときは、各所ではみ出さないように調整する必要がありそうだ。
position: sticky;は便利だがやねこい
position: sticky;だけで固定ができちゃう便利プロパティだが、いろいろ調整が必要になってきたりするので、やっぱりjsを使うのも手だなーと思ったのでした。
