先生と生徒の会話形式で理解しよう

生徒

「先生、スクロールするときに、あるヘッダーだけ画面の上にくっついて固定されるようにしたいです。どうすればいいですか？」

先生

「それならCSSのpositionプロパティでstickyを使うと便利です。stickyは、要素が通常は流れに沿って動きますが、指定した位置までスクロールすると固定される特徴があります。」

生徒

「fixedとabsoluteとどう違うんですか？」

先生

「absoluteは親要素を基準に位置を決め、fixedは画面を基準に位置を固定します。一方、stickyはスクロールに応じて動いたり止まったりするので、ナビゲーションバーや目次で使うとユーザーに優しいUIになります。」

1. stickyの基本的な使い方

CSSでposition: stickyを設定すると、要素は通常通りページの中で流れに沿って配置されますが、スクロールして指定したtopやleftの位置に達すると、その位置で固定されます。これにより、ユーザーがスクロールしても重要なナビゲーションや見出しを常に表示できます。

stickyを使うには、必ず親要素に高さが必要で、overflowがhiddenやautoになっていないことがポイントです。

2. sticky要素のHTMLとCSS例

以下の例では、目次のヘッダーをstickyでスクロールに合わせて固定しています。ユーザーがページをスクロールすると、ヘッダーは指定したtop位置で止まります。


<style>
    .sticky-header {
        position: sticky;
        top: 0;
        background-color: #ffc107;
        padding: 10px;
        font-weight: bold;
        border-bottom: 2px solid #333;
        z-index: 10;
    }
    .content {
        height: 1500px;
        background-color: #f8f9fa;
        padding: 20px;
    }
</style>

<div class="sticky-header">目次ヘッダー</div>
<div class="content">
    ここに長い記事の内容が入ります。スクロールしてみると、ヘッダーが画面上部で止まります。
</div>

ブラウザ表示