position: stickyが効かない場合に確認すること。リセットCSSにも注意

サイドバーでposition:stickyを使いたいときに適切に指定してみても効かなくて小一時間悩みました。
結論から言うと原因はリセットCSSで使用しているress.scssでした。

判明するまでの解決方法を整理します。

1. stickyコンテナーは適切な高さを持っているか

stickyコンテナーはstickyを指定した直の親です。以下の場合は.containerが親です。

<div class="container style="display: flex;">
<div class="main">
</div>
<div class="side" style="position: sticky; top: 0;">
</div>
</div>

上記の例の場合、display: flexで.mainと.sideが横並びになっているので、.containerの高さと.sideの高さは同一となりstickyは動作しません。以下の場合だと動作します。

<div class="container style="display: flex;">
<div class="main" style="height: 1000px;">
</div>
<div class="side" style="position: sticky; top: 0; height: 100px">
</div>
</div>

この場合は.containerが.mainと同一のheight1000px、.sideは.containerよりも低いheight: 100pxとなるためstickyが動作します。

2. 親にvisible以外のoverflow属性が指定されてないか

sticky要素の親にoverflow: visible以外の指定(hidden, scroll等)がある場合に不能になります。

今回自分の原因はこれでした。リセットCSSでress.cssを使用していてその中にoverflow-y: scrollがあったことによるものでした。

html {
  box-sizing: border-box;
  overflow-y: scroll; /* All browsers without overlaying scrollbars  ←これが原因 */
  -webkit-text-size-adjust: 100%; /* iOS 8+ */
}

コメントアウトして無事動作確認。

overflow:visible以外が存在するかチェックする方法

jQueryを使用していれば開発者コンソールで以下を入力して動作チェックできます。

$(".sticky要素").parents().css("overflow", "visible")

親要素全てがoverflow:visibleとなるので、入力した後stickyが動作していればどこかの親にoverflow: visible以外の指定がされていることがわかります。