スクロールしても画面の上に貼りついて追従するヘッダーや、記事の横についてくるSNSシェアボタン——こうした「ちょうどいい固定」を簡単に実現できるのが、CSSのposition: stickyです。JavaScriptを使わず、CSSだけで実装できます。この記事では、position: stickyの基本の使い方、実装例、fixedとの違い、そして「効かない！」というときの原因と対処法を、コード付きで解説します。
position: stickyとは？
position: stickyは、要素を「普段は通常の位置にあり、スクロールで指定位置に達すると、その場に貼りついて固定される」ようにするCSSの指定です。「通常配置（static）」と「固定（fixed）」の“いいとこ取り”のような動きをします。追従ヘッダーやサイドの目次など、UIをリッチにするのに便利です。
基本の書き方
固定したい要素にposition: sticky;と、貼りつく位置（topなど）を指定するだけです。top: 0;なら「画面の上端に達したら固定」という意味になります。
.header { position: sticky; top: 0; z-index: 10; }ポイント：top（またはbottomなど）の指定は必須です。これがないと、いつ固定するかが決まらず、stickyが機能しません。
実装例①：追従ヘッダー・ナビ
もっとも定番なのが、スクロールしても上に残るヘッダーやナビゲーションです。
.global-nav { position: sticky; top: 0; background: #fff; z-index: 100;}背景色（background）を指定しておかないと、下の要素が透けて見えてしまうので注意しましょう。
実装例②：追従するSNSシェアボタン
記事の横に、スクロールに合わせてついてくるシェアボタンもstickyで作れます。ある程度スクロールしたら固定したい場合は、topの値を調整します。
.share-buttons { position: sticky; top: 100px; }fixedとの違い
- position: fixed：最初から常に画面に固定され続ける（スクロール位置に関係なく貼りつく）
- position: sticky：普段は通常の位置にあり、指定位置に達したときだけ固定される
「最初は自然に流れて、途中から追従してほしい」という動きはstickyならでは。常時固定でよいならfixed、と使い分けます。
stickyが効かないときの原因と対処
「position: stickyを書いたのに固定されない」——これはよくあるつまずきです。主な原因は次のとおりです。
- top等を指定していない：
top/bottomなどの位置指定が必須。まずここを確認 - 親要素に
overflow: hiddenなどが付いている：親（先祖）要素にoverflow指定があると、stickyが効かなくなることがある。よくある原因なので要チェック - 親要素の高さが足りない：sticky要素は「親要素の範囲内」でしか追従しない。親が短いとすぐ固定が解除される
- Safari対策：一部環境ではベンダープレフィックス
-webkit-stickyが必要な場合がある
.el { position: -webkit-sticky; position: sticky; top: 0;}効かないときは、まず「top指定」と「親要素のoverflow」の2つを疑うと、たいてい解決します。
ブラウザ対応
position: stickyは、現在の主要なモダンブラウザで問題なく利用できます。古い環境（IEなど）を考慮する必要がある場合は、Polyfill（機能を補う補助スクリプト）を使う方法もありますが、現在では対応ブラウザが十分に広いため、通常はそのまま使って問題ありません。
よくある質問（FAQ）
Q. stickyが効きません。
A. まずtopなどの位置指定があるか、次に親（先祖）要素にoverflow: hidden/autoが付いていないかを確認してください。この2つが主な原因です。
Q. fixedとどちらを使うべき？
A. 常に固定するならfixed、途中から追従させたいならstickyが向いています。
Q. 途中で固定が外れてしまいます。
A. sticky要素は親要素の範囲内でしか追従しません。親要素の高さや構造を見直してみてください。
