position:stickyとは？スクロールで追従するヘッダーの基礎

position:stickyとは何か

position:stickyは、要素を「ふだんは通常どおりに配置し、スクロールでしきい値に達したらその位置に固定する」という動きをさせるCSSの指定です。relativeとfixedの中間のような性質を持ちます。

代表的な使い道が、ページ上部に貼り付くナビゲーションや、表の見出し行をスクロール中も見えるようにする用途です。読み進めても重要な要素が視界から消えない、というメリットがあります。

「途中まで通常、以降は固定」の仕組み

stickyを使うときは、固定し始める位置をtop（またはbottomなど）で指定します。たとえばtop:0と書くと、その要素が画面の一番上に達した瞬間からそこに貼り付きます。

それまでは通常のフローの中に普通に存在しているので、スクロールに従って一緒に上がっていきます。しきい値に到達すると、そこで止まって固定表示に切り替わる、というのがstickyの基本的な挙動です。

固定は親要素の範囲内に限られます。親の領域を抜けると、要素は一緒にスクロールアウトしていきます。この親との関係が、後述の「効かない」問題に深く関わります。

実務ではどこで関係する？

position:stickyは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

position:stickyについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

fixedとの違い

似た指定にposition:fixedがありますが、fixedは最初から常に画面の特定位置に固定され続けます。一方stickyは、スクロールがしきい値に届くまでは普通に流れ、そこから固定に切り替わる点が異なります。

「最初は本文の流れの中にあってほしいが、上部に来たら貼り付いてほしい」という自然な追従を求めるなら、stickyが適しています。

追従ヘッダーを作る手順

シンプルな追従ヘッダーを作る流れを順番に並べます。まずは1つのヘッダーで試すのがおすすめです。

1. ヘッダー要素を用意し、ページ上部に置く
2. そのヘッダーにposition:stickyを指定する
3. 固定し始める位置としてtop:0を指定する
4. 下に十分な高さのコンテンツを置き、スクロールできる状態にする
5. スクロールして、上部に達したら貼り付くことを確認する
6. 重なり順が気になる場合はz-indexで前面に出す

効かないときの確認ポイント

stickyが効かない原因で多いのは、topなどのしきい値を指定し忘れているケースです。位置の基準がないと固定が始まりません。

もうひとつ多いのが、親要素にoverflowの指定があってスクロールの基準がずれている、あるいは親の高さが足りずすぐにスクロールアウトしてしまうケースです。stickyは親の範囲内でしか固定されないため、親子の関係を見直すと解決することがよくあります。

追従の見え方を実機で確認する

追従ヘッダーは、スクロール量や画面の高さによって見え方が変わります。特にスマートフォンとパソコンで印象が違うため、実際の端末で確かめるのが確実です。

ギガサイト便を使えば、作りかけのHTMLをドロップして発行されたURLをスマホで開くだけで、手元の実機での追従の様子を確認できます。表示はCDNのエッジ配信で速く、QRコードの配布にも対応しているので、複数の端末でさっと開いて挙動を見比べる用途に便利です。