position: sticky; の使い方と 注意点についてまとめてみた！

WEB制作

はじめに

パララックス・追従ヘッダー・固定サイドバーに便利！

かつてはInternet Explorer（IE）非対応のため、position: sticky; を使うにはポリフィルを入れるか、position: fixed; で代用するしかありませんでした。
しかし、IEのサポートが終了した今、stickyは安心して使えるプロパティになっています。

この記事では、position: sticky; の基本的な使い方や注意点を、デモとサンプルコード付きでわかりやすく解説していきます。

「fixedと何が違うの？」という方や、「stickyってまだ使ってないな…」という方も、この機会にぜひ活用してみてください！

position: sticky; とは？

position: sticky; は、日本語で「粘着的な位置指定」。
あるポイントまでスクロールされると要素が追従する挙動を実現できます。

▼ 特徴まとめ

  • スクロールに応じて動く点では fixed と似ている

  • ただし、親要素の範囲内でしか固定されないのが大きな違い

  • top・left・right・bottom を使って粘着位置を指定

——

css

.sticky-box {
position: sticky;
top: 20px; /* スクロールで20pxの位置に達したら固定される */
}

上の例では、スクロールで .sticky-box が top: 20px の位置に来た時点から、その場に留まり続けます。ただし親要素の範囲内のみでの固定です。

 

position: fixed; との違い

fixed に似た動きをする sticky ですが、次の点が大きな違いです：

① 追従の基準が異なる

●sticky→「固定基準」・・・親要素

「動きの特徴」・・・指定位置に到達すると親要素内で貼りつく（相対位置）

●fixed→「固定基準」・・・ブラウザウィンドウ

「動きの特徴」・・・常に画面の同じ位置に固定される（絶対位置）

→ sticky は親要素の範囲内でのみ追従するため、親要素の下部で自動的に止まるのが特徴です。

② サイズとレイアウトが保たれる

fixed は要素がフローから浮くため、幅や高さが失われることがありますが、sticky は要素のサイズやレイアウトがそのまま保持されるため、デザインが崩れにくいというメリットがあります。

利用時の注意点

「stickyが効かない…」というときは、以下の項目を確認してみてください。

● 親要素に overflow が指定されている

sticky は、親・祖先要素に overflow: hidden・scroll・auto があると機能しません。
基本的に overflow: visible である必要があります。

css
/* NGパターン */

.container {
overflow: hidden; /* stickyが無効になる */
}

● top（または left 等）を指定していない

sticky を使うには、貼りつき開始位置を必ず指定する必要があります。

css
.sticky-box {
position: sticky;
top: 0; /* ← これがないと追従しない */
}

● 親要素に高さがない

親要素に十分な高さがないと、スクロール領域が生まれず sticky は機能しません。
親要素が sticky 要素のみの場合は、明示的に高さを設定する必要があります。

css
.parent {
height: 1500px; /* 必要な高さを確保！ */
}

【便利な使い方①】CSSだけでパララックス背景を実装する方法

position: sticky;を使えば、JavaScriptを使わずに軽量なパララックス背景を実現できます。
ここでは、スマホにも対応した「sticky版」と、より動きに迫力のある「fixed版」それぞれの実装方法をご紹介します。

■ パララックスとは？

スクロールに応じて背景がゆっくり動くことで奥行き感や立体感を演出できる技術です。
デザインに「動き」を加える手法として、特にファーストビューやセクション切り替えなどでよく使われます。

position: fixed;のようにウィンドウ全体を基準にするのではなく、親要素ごとに処理できるため制御しやすいのが特徴です。

✅ stickyパララックスの構造と実装

【HTML構成】

html

<div class=”parallax-sticky”>

  <div class=”bg-cont”>パララックス背景無しの要素</div>

  <div class=”inn”>

    パララックス背景有りの要素

    <div class=”parallax-bg”>

      <div class=”bg bg01″></div>

    </div>

  </div>

  <div class=”bg-cont”>パララックス背景無しの要素</div>

  <div class=”inn”>

    パララックス背景有りの要素

    <div class=”parallax-bg”>

      <div class=”bg bg02″></div>

    </div>

  </div>

</div>

【CSS】

css
.parallax-sticky .inn {
position: relative;
z-index: 1;
}
.parallax-sticky .parallax-bg {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
}
.parallax-sticky .parallax-bg .bg {
background: no-repeat center center / cover;
width: 100%;
height: 100vh;
position: sticky;
top: 0;
z-index: -1;
}
.bg01 {
background-image: url("../img/bg01.jpg");
}
.bg02 {
background-image: url("../img/bg02.jpg");
}

⚠ sticky実装の注意点

  • 親要素の overflow に visible 以外が設定されていると動作しない

  • top プロパティが必須（例：top: 0）

  • 追従は親要素内のみであるため、スクロール量が短いと十分に動かない場合がある

✅fixedでパララックスを実装する場合

position: fixed; を使えば、背景をウィンドウに固定してより“リッチ”なパララックス表現が可能です。
ただし、スマホ（iOS）では background-attachment: fixed; に不具合が出やすく、注意が必要です。

【HTML】

html
<div class=”parallax-fixed”>
<div class=”bg-cont”>パララックス背景無しの要素</div>
<div class=”inn”>パララックス背景有りの要素</div>
</div>

【CSS】

css
.parallax-fixed {
position: relative;
z-index: 1;
}
.parallax-fixed::before {
content: “”;
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: url(“../img/bg01.jpg”) no-repeat center center / cover;
z-index: -1;
}

【便利な使い方②】stickyで実装する“追従ヘッダー”

position: sticky; を使えば、これまで JavaScript や複雑な調整が必要だった 追従ヘッダー を、シンプルなCSSだけで実現できます。

🎯 利用シーン

  • グローバルナビゲーションの追従

  • スマホ用ヘッダーの簡易固定

  • サイドナビやカテゴリーバーにも応用可能

✅ stickyヘッダーの基本構造とコード

【HTML】

html

<div class=”header-wrap”>

  <header>

    <div class=”logo”>Logo</div>

    <nav>

      <ul>

        <li>メニュー01</li>

        <li>メニュー02</li>

        <li>メニュー03</li>

      </ul>

    </nav>

  </header>

  <div class=”cont”>

    要素

  </div>

</div>

【CSS】

css

.header-wrap header {
background: #fff;
box-shadow: 0 0 16px -6px rgba(0, 0, 0, 0.6);
width: 100%;
display: flex;
position: sticky; /* ★ 追従させる */
top: 0; /* ★ 画面上部で固定 */
z-index: 10; /* 他要素より上に表示（必要に応じて） */
}

.header-wrap header .logo {
color: #083cac;
font-size: 18px;
font-weight: bold;
padding: 15px;
}

.header-wrap nav ul {
display: flex;
justify-content: center;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}

.header-wrap nav ul li {
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
height: 100%;
text-align: center;
}

💡 補足：stickyを効かせるためのポイント

  • header の親要素（ここでは .header-wrap）の overflow が visible であること

  • header に必ず top を指定（例：top: 0）

  • 他の要素との重なりを防ぐには z-index を調整

【便利な使い方③】ナビゲーションだけを追従させる方法

position: sticky; を使えば、ヘッダー全体ではなく、ナビゲーション（グローバルナビ）だけを画面上部に追従させることも簡単にできます。

💡 固定ナビだけを追従させたいケースとは？

  • ロゴは上部に固定しない

  • スクロールでロゴは流れ、ナビゲーションだけが残る

従来の fixed では JavaScript を使ってスクロール位置を判定し、position の切り替えをしていましたが、sticky の方が簡単に書けます。

✅stickyナビゲーションの基本構造とコード

【HTML】

html

<div class=”header-nav-wrap”>

  <header>

    <div class=”logo”>Logo</div>

  </header>

  <nav>

    <ul>

      <li>メニュー01</li>

      <li>メニュー02</li>

      <li>メニュー03</li>

    </ul>

  </nav>

  <div class=”cont”>

    要素

  </div>

</div>

【CSS】

css
/* ロゴ部分 */

.header-nav-wrap header {
width: 100%;
}

.header-nav-wrap header .logo {
color: #083cac;
font-size: 18px;
font-weight: bold;
padding: 15px;
}

/* ナビ部分（ここだけ追従） */
.header-nav-wrap nav {
background: #083cac;
position: sticky; /* ★追従させる */
top: 0; /* ★画面上部で固定 */
z-index: 10; /* 他要素より前に出す（必要に応じて） */
}

.header-nav-wrap nav ul {
display: flex;
justify-content: center;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}

.header-nav-wrap nav ul li {
background: #083cac;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 15px 30px;
text-align: center;
height: 100%;
}

.header-nav-wrap nav ul li + li {
border-left: 1px solid #fff;
}

【便利な使い方④】追従サイドバーの実装する方法

position: sticky; を使えば、スクロールに合わせてついてくるサイドバーも簡単に作れます。
これまでJavaScriptでのスクロール処理や、fixed＋余白の調整が必要だったレイアウトも、CSSだけで対応可能です。

 stickyサイドバーの活用例

  • 長い記事やコラムページで目次を追従

  • ショッピングサイトで絞り込み条件のメニュー

  • 管理画面やダッシュボードの機能一覧

✅sticky追従サイドバーの基本構造とコード

【 HTML】

html 

<div class=”sidebar-wrap”>

  <div class=”cont”>

    <p>要素</p>

  </div>

  <div class=”sidebar”>

    <p>サイドバー</p>

    <ul>

      <li>メニュー01</li>

      <li>メニュー02</li>

      <li>メニュー03</li>

    </ul>

  </div>

</div>

【 CSS】

css
 .sidebar-wrap {

display: flex;
flex-direction: row-reverse; /* サイドバーを右側に表示 */
align-items: flex-start; /* 高さを揃えない（これが重要） */
}

.sidebar-wrap .cont {
padding-left: 30px;
width: 60%;
min-height: 800px;
}

.sidebar-wrap .sidebar {
position: sticky; /* ★ スクロールに追従 */
top: 0; /* ★ 上端に固定 */
width: 40%;
}

.sidebar-wrap .sidebar p {
font-weight: bold;
margin-bottom: 10px;
}

.sidebar-wrap .sidebar ul li {
background: #c0dbf3;
padding: 15px;
}

.sidebar-wrap .sidebar ul li + li {
border-top: 1px solid #fff;
}

実装のポイント

  • 横並びにする場合、親要素には display: flex; を使います。

  • align-items: flex-start; を指定しないと、左右の要素の高さが揃ってしまい、sticky が正しく効かないので注意！


【便利な使い方⑤】スクロールに追従する見出し

解説ページやFAQ、マニュアルページなどで項目数が多いとき、今どのセクションを読んでいるのか一目で分かるように、見出し（タイトル）を追従表示させると非常に便利です。

JavaScriptや position: fixed; を使って実装しようとすると、余白調整や位置切り替えの処理が面倒ですが、position: sticky; を使えばCSSだけでサクッと実現可能です！

✅stickyスクロール追従の基本構造とコード

【 HTML】（※ダミーテキスト省略）

html

<div class=”head-sticky-wrap”>

  <div class=”inn”>

    <h2 class=”ttl”>追従タイトル01</h2>

    <p>01エリアのテキスト…</p>

  </div>

  <div class=”inn”>

    <h2 class=”ttl”>追従タイトル02</h2>

    <p>02エリアのテキスト…</p>

  </div>

  <div class=”inn”>

    <h2 class=”ttl”>追従タイトル03</h2>

    <p>03エリアのテキスト…</p>

  </div>

  <div class=”inn”>

    <h2 class=”ttl”>追従タイトル04</h2>

    <p>04エリアのテキスト…</p>

  </div>

</div>

【CSS】

css

.head-sticky-wrap .inn {
padding: 20px;
}

.head-sticky-wrap .ttl {
background: #e3ebec;
color: #083cac;
font-weight: bold;
margin-bottom: 20px;
padding: 10px;
position: sticky; /* ★スクロールに追従 */
top: 0; /* ★上端に固定 */
z-index: 1; /* 他要素の下に隠れないように */
}

実装のポイント

  • z-index を指定しておくと、スクロール中に見出しが他の要素に隠れてしまうのを防げます。

  • background を忘れずに設定することで、後続のコンテンツと重なっても視認性が確保されます。

まとめ

今回は、position: sticky; を活用した便利な実装例をご紹介しました。

JavaScriptや position: fixed; を使わなくても、シンプルなCSSだけでスムーズに追従動作を実現できる点は、特に魅力的です。まだあまり使っていない方も、この機会にぜひ取り入れてみてください。