position: sticky が効かない原因は？よくある6パターンを実例で解説

まず確認したいポイント

「仕組みはあとでいいので、とりあえず今のstickyを直したい」という場合は、まず次の項目を確認してみてください。

私の場合、top に問題がなければ、次は親要素の overflow を疑います。

position: sticky はどこに固定されるのか

原因を見る前に、stickyの仕組みをほんの少しだけ整理しておきます。

よく使うのは、こんな書き方です。

.sidebar {
  position: sticky;
  top: 20px;
}

top: 20px は、「スクロールして、この要素が上から20pxの位置まで来たら、そこからstickyする」という基準になります。

ここで覚えておきたいのは、position: sticky が単純な「画面に固定するCSS」ではないということです。

stickyは通常のレイアウトの中にいるまま、スクロール位置に応じて追従します。さらに、祖先要素にスクロールの仕組みを持つ overflow があると、その要素との関係で動作します。

原因1：top などの位置を指定していない

まず最初に確認したいのが、top などの位置指定です。

例えば、これだけでは縦方向に期待したstickyの動きになりません。

.sidebar {
  position: sticky;
}

縦方向にstickyさせたいなら、top や bottom など、どこまで来たらstickyさせるのかを指定します。

.sidebar {
  position: sticky;
  top: 20px;
}

画面上端に付けたいなら top: 0 でも大丈夫です。

かなり基本的なところですが、ほかの原因を探し始める前に一度確認しておくと、あれこれCSSを触らずに済みます。

原因2：親・祖先要素の overflow が影響している

top も書いている。それでもstickyしない。

そんなとき、私なら次に親・祖先要素の overflow を見ます。

例えば、こんな構造があったとします。

<div class="wrapper">
  <div class="layout">
    <main class="main">
      メインコンテンツ
    </main>

    <aside class="sidebar">
      サイドバー
    </aside>
  </div>
</div>

stickyは .sidebar に指定しています。

.sidebar {
  position: sticky;
  top: 20px;
}

ところが、少し外側の .wrapper にこんな指定があったとします。

.wrapper {
  overflow: hidden;
}

この overflow: hidden が、stickyの動きに影響することがあります。

stickyは、スクロールの仕組みを持つ直近の祖先との関係で動きます。そのため、例えば次の指定が親や祖先要素にないか確認します。

overflow: hidden;
overflow: auto;
overflow: scroll;

ここで少しやっかいなのが、stickyのすぐ上の親だけを確認すればいいわけではないことです。

DevToolsでsticky要素を選んだら、親、そのまた親と必要に応じて上へたどっていきます。

「stickyのCSSは合っているのに、なんで動かないんだろう？」というときに、何階層か上の要素で原因が見つかることは珍しくありません。

body {
  overflow-x: hidden;
}

.wrapper {
  overflow: clip;
}

原因3：stickyが動ける高さがない

次に確認したいのが、stickyを囲んでいる要素の高さです。

stickyは、親要素を無視してページの最後までずっと付いてくるわけではありません。

<div class="sidebar-wrap">
  <aside class="sidebar">
    サイドバー
  </aside>
</div>

.sidebar {
  position: sticky;
  top: 20px;
}

CSSだけを見ると問題なさそうですが、.sidebar-wrap と .sidebar の高さがほぼ同じなら、stickyが動ける場所がほとんどありません。

stickyが効かないときは、「CSSは合っているか？」だけではなく、「この要素が動ける余白はあるか？」も見てみてください。

原因4：sticky要素そのものが高すぎる

反対に、sticky要素そのものが大きすぎる場合もあります。

ブログのサイドバーなら、プロフィール、カテゴリ、人気記事、バナー、お問い合わせなどを全部まとめてstickyにしているケースです。

.sidebar {
  position: sticky;
  top: 20px;
}

.sidebar 自体が表示領域より高ければ、すべてを見せたままきれいに追従させるのは難しくなります。

そんな場合は、サイドバー全体ではなく、本当に追従させたい部分だけを分ける方法もあります。

<aside class="sidebar">
  <div class="sidebar__normal">
    ...
  </div>

  <div class="sidebar__sticky">
    ...
  </div>
</aside>

.sidebar__sticky {
  position: sticky;
  top: 20px;
}

CSSだけを見るのではなく、「そもそも、どこまでstickyにする必要がある？」と考え直すと、レイアウト自体がすっきりすることもあります。

原因5：FlexboxやGridの stretch で高さが伸びている

2カラムレイアウトでstickyを使うときに、もうひとつよく確認するのがFlexboxやGridです。

ポイントは、sticky要素の高さが、自分の想像以上に伸びていないかです。

Flexboxの場合

例えば、こんな2カラムレイアウトです。

css Copy

.layout {
  display: flex;
}

.main {
  flex: 1;
}

.sidebar {
  width: 300px;
  position: sticky;
  top: 20px;
}

Flexboxでは、交差軸方向の配置によって子要素が高さいっぱいに伸びることがあります。

メインコンテンツが長いと、sidebarまでその高さに合わせて伸びていて、結果としてstickyが動ける範囲がなくなっていることがあります。

その場合は、例えば次のように調整します。

css Copy

.layout {
  display: flex;
  align-items: flex-start;
}

sticky要素だけを調整するなら、

css Copy

.sidebar {
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

ここで覚えておきたいのは、「Flexboxだからstickyが使えない」のではないということです。

Flexboxによってsticky要素が今どんな高さになっているのかを見るのが先です。

.layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
}

.sidebar {
  position: sticky;
  top: 20px;
}

.sidebar {
  position: sticky;
  top: 20px;
  align-self: start;
}

原因6：実はstickyしているけれど、ヘッダーの裏に隠れている

最後は、stickyそのものはちゃんと効いているケースです。

例えば上部に固定ヘッダーがあるとします。

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
}

そこへ、次のstickyを指定します。

.sidebar {
  position: sticky;
  top: 0;
}

sidebarはちゃんと画面上端にstickyします。でも、その場所には高さ80pxの固定ヘッダーがあります。

そのため、stickyしているのにヘッダーの裏へ入り、「効いていないように見える」ことがあります。

この場合は、ヘッダーの高さを考慮して位置を調整します。

.sidebar {
  position: sticky;
  top: 100px;
}

要素同士が重なっているなら、必要に応じて z-index も確認します。

.sidebar {
  position: sticky;
  top: 100px;
  z-index: 1;
}

私がstickyが効かないときに確認している順番

ここまでいろいろな原因を紹介しましたが、実際の制作中に全部を一度に疑う必要はありません。

私の場合は、だいたい次の順番で確認しています。

1. position: sticky が本当に適用されているか
   DevToolsで、別のCSSに上書きされていないか確認します。
2. top が入っているか
   ここまではすぐに確認できます。
3. 親から上へ overflow をたどる
   overflow だけでなく、overflow-x と overflow-y まで見ます。
4. stickyが動ける高さを見る
   sticky要素と親要素の高さがほぼ同じになっていないか確認します。
5. sticky要素自身の高さを見る
   表示領域より大きくなっていないか確認します。
6. Flexbox・Gridなら stretch を確認する
   DevToolsで実際の高さを見ると分かりやすいです。
7. 最後に重なりを見る
   stickyは動いているのに、固定ヘッダーなどの裏へ入っていないか確認します。

この順番で見るようにしておくと、「検索して出てきたCSSを、とりあえず全部足してみる」という状態になりにくくなります。

長くCSSを書いていても、原因が何階層か上の要素にあると一瞬迷うことはあります。そんなときほど、ひとつずつ切り分けたほうが結果的には早く直せます。

参考情報

今回の記事では、position: sticky、overflow、Flexbox・Gridの配置について、MDN Web Docsの仕様も確認しています。

• MDN Web Docs「position」
• MDN Web Docs「overflow」
• MDN Web Docs「overflow-y」
• MDN Web Docs「align-items」
• MDN Web Docs「align-self」