メニューが止まらない！？エンジニアがハマったstickyトラップ

みなさんこんにちは。ノウキナビ エンジニアの網掛です。
現在のノウキナビチームは（というか唐沢農機サービス全社的にそうなんですが）お金がかからないならなんでもやってみることが奨励されています。
「始めなければいつまでたってもできないよ。」
「できない理由考えるより、できる方法考えた方が楽しくね？。」
そんな会社です。

そんな会社なので、バックエンドのエンジニアも例外ではありません。デザイナーが足りなければCSSを書く必要に迫られます。

今回はスタイルシートを書いていて半日私を悩ませたstickyについて書きたいと思います。

stickyとは

WEBデザイナーやフロントエンドエンジニアにはおなじみの{position: sticky;}。
画面にスクロールに合わせて一緒に動くけれど、ある部分まできたらピタッと止まる便利なスタイルシートです。
当サイトでもメニューや画像の表示に使われています。


<style>
.in{ border: 1px solid white;}
.content1{height:100px;background-color: bisque;}
.content2{height:300px;background-color: bisque;}
.menu1{background-color:blueviolet;position: -webkit-sticky; position:sticky; top:0 }
.menu2{background-color:brown;position: -webkit-sticky; position:sticky; top:0 }
</style>
<div class="out">
<div class="in">
<div class="content1">content1</div>
<div class="menu1">Menu1</div>
<div class="content2">content2</div>
</div>
<div class="in">
<div class="content1">content3</div>
<div class="menu2">Menu2</div>
<div class="content2">content4</div>
</div>
</div>


このStickyを指定したmenuが画面最上部で止まらずに流れていってしまうんです・・・。
これには困りました。

stickyが効かない原因

半日ほど悩みました。プロパティをひとつづつ消したり戻したりして調べたところ、stickyを指定している要素の親要素にoverflowが指定されているときには止まらない“場合がある”ことが分かりました。
まぁ、この手の足踏みはエンジニアには日常茶飯事です。解決できて良かったぁ。
もし、”position: sticky”で止めたいものが止まらないとお悩みの方、親要素を遡ってoverflowプロパティを消してみてください。

↓↓↓ ｍｅｎｕが止まらないパターン ↓↓↓

<style>
.out{overflow:scroll}
.in{ border: 1px solid white;}
.content1{height:100px;background-color: bisque;}
.content2{height:300px;background-color: bisque;}
.menu1{background-color:blueviolet;position: -webkit-sticky; position:sticky; top:0 }
.menu2{background-color:brown;position: -webkit-sticky; position:sticky; top:0 }
</style>
<div class="out">
<div class="in">
<div class="content1">content1</div>
<div class="menu1">Menu1</div>
<div class="content2">content2</div>
</div>
<div class="in">
<div class="content1">content3</div>
<div class="menu2">Menu2</div>
<div class="content2">content4</div>
</div>
</div>