Webサイトでスクロールしてもヘッダーが画面上部に固定されたり、サイドバーが追従してきたりするデザインを見たことはありませんか？このような「要素の固定」をCSSで実装する際、position: sticky; は非常に強力で便利なプロパティです。

しかし、いざ使おうとすると「position: fixed; と何が違うの？」「なぜか効かない…」とつまずいてしまうWeb制作学習者の方も少なくありません。

この記事では、そんなposition: sticky;の「なぜ？」を解消し、基本的な仕組みから実用的な実装パターン、よくある失敗の原因と解決策までを完全網羅します。

この記事を読めば、あなたは以下のスキルを習得できます。

• position: sticky; と fixed の違いを明確に理解し、適切に使い分けられる

• コピペで使えるサンプルコードを使って、明日からすぐに実装できる

• 「効かない」トラブルに直面しても、自分で原因を特定し解決できる

現場で通用するプロのスキルを身につけ、クライアントに評価されるWebサイトを制作しましょう。

position:stickyとは？基礎から分かる要素固定の仕組み

position: sticky; とは、ひと言でいうと**「通常はスクロールに追従し、特定の場所に到達すると画面に固定される」**プロパティです。relative（相対位置）とfixed（固定位置）の特性を併せ持った、非常に便利な値です。

stickyの基本的な動作パターン

stickyを指定された要素（スティッキーアイテム）は、通常は他の要素と同じように文書の流れに沿ってスクロールします。しかし、ユーザーがスクロールしていき、指定された位置（例：画面の上端から0px）に到達した瞬間、その場に「ペタッ」と貼り付いた（stick）ように固定されます。

そして、その要素を含んでいる親要素（コンテナ）の範囲をスクロールし終えると、固定が解除され、また文書の流れに沿ってスクロールしていきます。

スティッキーアイテムとコンテナの関係

position: sticky; を理解する上で最も重要なのが、**「スティッキーアイテム（固定したい要素）」と「コンテナ（スティッキーアイテムを直接囲む親要素）」**の関係です。

• スティッキーアイテム: position: sticky; を指定した要素。

• コンテナ: スティッキーアイテムを直接囲む親要素。

スティッキーアイテムは、コンテナの表示範囲内でのみ固定される、というルールがあります。コンテナが画面から見えなくなると、スティッキーアイテムも一緒に見えなくなります。この点が、常に画面の同じ位置に表示され続ける position: fixed; との大きな違いです。

他のposition値との位置づけ

CSSのpositionプロパティには、sticky以外にもいくつかの値があります。それぞれの役割を理解しておくと、stickyの位置づけがより明確になります。

position:sticky vs fixed｜使い分けの判断基準

stickyとfixedはどちらも要素を固定できますが、その振る舞いは大きく異なります。この違いを理解することが、適切な実装への第一歩です。

5つの重要な違いを比較表で解説

使い分けの具体的判断フロー

どちらを使うべきか迷ったときは、以下のフローで考えてみましょう。

1. 要素を「常に」画面の同じ場所に表示したいか？

   • YES → position: fixed が適しています。（例: ページの右下に常に表示される「トップへ戻る」ボタン）

   • NO → 次の質問へ

2. 特定のセクション内だけで固定し、それ以外はスクロールさせたいか？

   • YES → position: sticky が最適です。（例: メインコンテンツの横にあるサイドバー。フッターまで来たら一緒にスクロールさせたい）

   • NO → 他のposition（relative, absolute）や、そもそも固定する必要がないかを再検討しましょう。

実際のサイト制作での選択例

• Webサイトのヘッダー: position: sticky

  • 理由: ファーストビューでは通常の位置にあり、スクロールすると画面上部に固定したいから。

• 記事コンテンツ内のサイドバー（目次など）: position: sticky

  • 理由: 記事を読み進めている間は追従してほしいが、記事の最後（フッターなど）まで来たら、それ以上はついてきてほしくないから。

• Cookie同意バナー: position: fixed

  • 理由: ユーザーが同意するまで、ページのどの部分をスクロールしても常に画面下部（または上部）に表示させたいから。

position:stickyの正しい書き方と基本実装

position: sticky; の実装は非常にシンプルです。基本的な書き方をマスターしましょう。

最小限のコード記述パターン

stickyを機能させるためには、最低限2つのプロパティが必要です。

1. position: sticky;

2. top, bottom, left, right のいずれか1つ（固定を開始する位置の指定）

CSS例：

.sticky-element {
  position: sticky;
  top: 0; /* 画面の上端に到達した時に固定 */
}

このCSSを適用された.sticky-elementは、スクロールして画面の上端から0pxの位置に来ると、その場に固定されます。

top・bottom・left・rightの使い方

これらのプロパティは、スティッキーアイテムが「どの位置で固定されるか」を決定します。

• top: 0;: 要素の上辺が、親要素の上辺から0pxの位置（多くの場合、画面上端）で固定されます。ヘッダーによく使われます。

• bottom: 0;: 要素の下辺が、親要素の下辺から0pxの位置（多くの場合、画面下端）で固定されます。スティッキーフッターなどで使われます。

• left: 0;: 要素の左辺が、親要素の左辺から0pxの位置で固定されます。

• right: 0;: 要素の右辺が、親要素の右辺から0pxの位置で固定されます。

z-indexとの組み合わせテクニック

position: sticky; を指定した要素は、他の要素と重なることがあります。特に、後続のコンテンツがスティッキーアイテムの下に潜り込んでしまうケースは頻繁に発生します。

このような場合、z-indexプロパティを使って重なりの順序を制御します。値が大きいほど、手前（上）に表示されます。

CSS例：

.sticky-header {
  position: sticky;
  top: 0;
  background-color: #fff; /* 背景色がないと下の要素が透けるので注意 */
  z-index: 100; /* 他の要素より手前に表示 */
}

実用的な活用例5選｜コピペで使える実装サンプル

ここでは、実際のWeb制作でよく使われる5つの実装パターンを、HTMLとCSSのサンプルコード付きで紹介します。

1. ヘッダー固定（追従ナビゲーション）

最も一般的な使い方です。スクロールしてもナビゲーションが常に表示されるため、ユーザーの利便性が向上します。

HTML:

<header class="site-header">
  </header>
<main>
  </main>

CSS:
CSS

.site-header {
  position: -webkit-sticky; /* Safari対応 */
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
}

2. サイドバー追従（2カラムレイアウト）

ブログ記事の目次や広告などを、コンテンツを読み進めている間ずっと表示させておきたい場合に使います。

HTML:

<div class="container">
  <main class="main-content">
    </main>
  <aside class="sidebar">
    <div class="sidebar-inner">
      </div>
  </aside>
</div>

CSS:

.container {
  display: flex;
  align-items: flex-start; /* 高さを揃えるため */
}
.main-content {
  flex: 3; /* 幅の割合 */
}
.sidebar {
  flex: 1; /* 幅の割合 */
}
.sidebar-inner {
  position: -webkit-sticky;
  position: sticky;
  top: 20px; /* ヘッダーの高さなどを考慮して少し空ける */
}

注意: このレイアウトでは、親要素である.sidebarが十分な高さを持っている必要があります。

3. テーブルヘッダー固定

縦に長いテーブル（料金表など）で、ヘッダー行（<th>）を固定する際に非常に便利です。

HTML:

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>項目1</th>
        <th>項目2</th>
        <th>項目3</th>
      </tr>
    </thead>
    <tbody>
      </tbody>
  </table>
</div>

CSS:

.table-container {
  max-height: 400px; /* コンテナに高さを指定してスクロールを発生させる */
  overflow-y: auto;
}
thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #f2f2f2; /* 背景色を指定しないと下の行が透ける */
  z-index: 10;
}

4. フッター固定（Sticky Footer）

コンテンツが少ないページでもフッターを常に最下部に表示させたい、いわゆる「スティッキーフッター」の実装は、従来は複雑でしたが、Flexboxと組み合わせることでstickyとは別の方法でシンプルに実装できます。ここではstickyを使った、スクロールで追従するフッターを紹介します。

HTML:

<body>
  <header>...</header>
  <main>
    </main>
  <footer class="sticky-footer">
    フッターコンテンツ
  </footer>
</body>

CSS:

CSS

.sticky-footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 1rem;
  text-align: center;
}

5. モーダル内スクロール対応

モーダルのヘッダーやフッター（ボタンエリア）を固定し、コンテンツエリアだけをスクロールさせたい場合にも応用できます。

HTML:

<div class="modal-body">
  <div class="modal-header">モーダルヘッダー</div>
  <div class="modal-content">
    </div>
  <div class="modal-footer">アクションボタン</div>
</div>

CSS:

.modal-body {
  height: 80vh; /* モーダルの高さ */
  overflow-y: auto;
}
.modal-header, .modal-footer {
  position: -webkit-sticky;
  position: sticky;
  background-color: #fff;
  z-index: 1;
}
.modal-header {
  top: 0;
}
.modal-footer {
  bottom: 0;
}

position:stickyが効かない時の原因と解決法

「コードは合っているはずなのに、なぜかstickyが効かない！」これは、多くの学習者が直面する壁です。ここでは、よくある原因とその解決法をチェックリスト形式で紹介します。

効かない原因TOP5とチェックリスト

まずは以下の5点を確認してみてください。ほとんどの場合、これで解決します。

• [ ] top, bottom, left, right のいずれかを指定していますか？

  • position: sticky; だけでは動作しません。必ず固定位置を指定する必要があります。

• [ ] 親要素に overflow: hidden, scroll, auto が指定されていませんか？

  • 最重要チェック項目です。 stickyの親要素（コンテナ）や、さらにその上の先祖要素に overflow が指定されていると、stickyは動作しません。overflow: visible;（初期値）である必要があります。

• [ ] stickyを指定した要素の親要素（コンテナ）に十分な高さがありますか？

  • stickyは親要素の範囲内でしか機能しません。親要素の高さ＝子要素（sticky要素）の高さになっていると、スクロールする余地がなく固定されません。

• [ ] display: inline になっていませんか？

  • stickyはブロックレベル要素やflexアイテムなどに適用します。インライン要素には効かない場合があります。

• [ ] Safari向けに -webkit- プレフィックスを付けていますか？

  • 一部の古いバージョンのSafariでは、ベンダープレフィックス -webkit-sticky が必要です。

親要素のoverflow問題の対処法

overflowが原因である場合、開発者ツールでstickyにしたい要素の親を一つずつ遡り、overflowプロパティが指定されていないか確認します。もし不要なoverflow指定があれば削除するか、HTMLの構造を見直してoverflowの影響を受けないように変更する必要があります。

高さ不足による動作不良の解決

親要素の高さが足りない場合は、親要素にheightやmin-heightを指定するか、他のコンテンツを追加して親要素が自然に高くなるように調整します。

ブラウザ対応とベンダープレフィックス

現在、ほとんどの主要ブラウザはposition: stickyに対応しています。しかし、Safariや一部の古いブラウザとの互換性を考慮し、-webkit-プレフィックスを併記しておくことを推奨します。

.sticky-element {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
}

最新のブラウザ対応状況は、Can I use… などのサイトで確認できます。

プロが教える実装時の注意点とベストプラクティス

position: sticky; をただ使うだけでなく、より高品質な実装を目指すための注意点を紹介します。

パフォーマンスを考慮した実装方法

stickyは比較的新しいプロパティであり、ブラウザのレンダリングに負荷をかける可能性があります。特に、多数の要素にstickyを使用したり、複雑な計算を伴うレイアウト内で使用したりすると、スクロールがカクつく原因になることがあります。

対策:

• 必要最低限の要素にのみstickyを使用する。

• sticky要素内のコンテンツをシンプルに保つ。

• box-shadowや複雑なborderなど、描画負荷の高いスタイルは控えめにする。

レスポンシブ対応での注意点

スマートフォンなどの小さな画面では、ヘッダーを固定すると表示領域が狭くなり、ユーザー体験を損なうことがあります。メディアクエリを使い、特定の画面幅でのみstickyを有効にする、または固定ヘッダーの高さを調整するといった配慮が必要です。

CSS例：

/* PC表示ではヘッダーを固定 */
@media (min-width: 768px) {
  .site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

アクセシビリティへの配慮

固定ヘッダーなどがコンテンツに重なってしまい、情報が隠れてしまうことは避けるべきです。また、ページ内リンク（例: <a href="#section2">）でジャンプした際に、固定ヘッダーの分だけずれて目的の場所が見えなくなる問題も頻発します。

対策:

• ページ内リンクの飛び先要素に、固定ヘッダー分のpadding-topやscroll-margin-topを指定する。

• scroll-margin-topは、この問題を解決するために作られたプロパティで、非常に便利です。

CSS例：

/* ヘッダーの高さが60pxの場合 */
.section {
  scroll-margin-top: 60px;
}

よくある質問｜position:stickyのQ&A

position: sticky; に関する、よくある疑問にお答えします。

Q1: JavaScript無しでも十分な実装は可能？

A1: はい、可能です。 position: sticky; の最大の利点は、これまでJavaScriptが必要だった追従要素の多くを、CSSだけでシンプルに実装できる点にあります。基本的なヘッダーやサイドバーの固定であれば、CSSのみで十分です。

Q2: 古いブラウザ（IEなど）への対応は必要？

A2: プロジェクトの要件によります。 Internet Explorer (IE) はposition: stickyに全く対応していません。もしIE対応が必須の案件であれば、JavaScriptを使った代替実装（ポリフィル）を検討するか、stickyを使わないデザインにする必要があります。しかし、現在ではIEのサポートを終了するプロジェクトがほとんどです。

Q3: WordPressでの実装時の注意点は？

A3: 管理バーの高さを考慮する必要があります。 WordPressにログインした状態だと、画面上部に管理バーが表示されます。この状態でtop: 0;を指定すると、ヘッダーが管理バーの下に隠れてしまいます。CSSで管理バーの有無を判定し、topの値を調整する対応が必要です。

CSS例：

.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 999;
}
/* ログイン時（bodyに.logged-inクラスが付与される） */
body.logged-in .site-header {
  top: 32px; /* 管理バーの高さ */
}

まとめ｜position:stickyをマスターして制作スキルアップ

今回は、CSSのposition: sticky;について、基礎知識から実践的な使い方、トラブルシューティングまでを詳しく解説しました。

習得すべきポイントの再確認

• stickyは「親要素の範囲内で」「指定位置にきたら」固定される。

• fixedは「常に画面の同じ場所」に固定される。

• 効かない時は、まず「top等の指定」と「親のoverflow」を疑う。

• 実装時は「パフォーマンス」「レスポンシIVE」「アクセシビリティ」にも配慮する。

position: sticky; は、ユーザーの利便性を高めるモダンなレイアウトに欠かせない技術です。最初は少し戸惑うかもしれませんが、この記事で紹介したポイントを押さえれば、必ず使いこなせるようになります。

さらなるスキルアップへの道筋

positionプロパティをマスターしたら、次はFlexboxやGrid Layoutといった、より高度なレイアウト手法の学習に進むのがおすすめです。これらの技術を組み合わせることで、表現できるデザインの幅が格段に広がります。

関連記事

・相対位置relativeと絶対位置absoluteをわかりやすく【CSS基礎-positionプロパティ】

・【初心者向け】position: absolute; の使い方完全ガイド｜よくあるエラーと解決法も解説

・【初心者向け】position:stickyの使い方完全ガイド｜fixedとの違いから実装まで

・【2025年】Flexbox初心者ガイド｜WEB制作で即戦力になるCSS技術

・CSS Grid Layout｜Web制作初心者が知るべき実装テクニック