‘position: sticky;’を付与すると、その要素がスクロールによって特定の位置に達したところで固定される（粘着する）ように振る舞います。
ヘッダーやサイドバーなどスクロールしても画面の一部に留まり続けるような処理によく使われます。
下記コード例をHTMLファイルで保存してブラウザで開いてスクロールしてみてください。
緑色の見出しがスクロールして画面上部に到達すると、その位置にピタッと固定されるはずです。
コード 例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>position: sticky 例</title>
<style>
body {
height: 1500px; /* ページをスクロール可能にするための高さ */
}
.content-section {
border-bottom: 1px solid #eee;
}
.sticky-header {
position: sticky; /* これがポイント！ */
top: 0; /* スクロールするとビューポートの上端から0pxの位置で固定 */
background-color: #4caf50; /* 緑色 */
color: white;
padding: 15px;
text-align: center;
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="content-section">
<h2>ページのトップコンテンツ</h2>
<p>
このセクションはページの冒頭にあります。下にスクロールして、スティッキーな見出しがどのように固定されるか見てみましょう。
</p>
<p>
ウェブサイトのデザインにおいて、ユーザーインターフェースの使いやすさは非常に重要です。特に、長いコンテンツを持つページでは、重要な要素が常にアクセス可能な状態であると、ユーザーの利便性が向上します。このような場合に`position:
sticky`は大変役立ちます。
</p>
</div>
<div class="sticky-header">
私は `position: sticky` です！スクロールすると固定されます。
</div>
<div class="content-section">
<h2>中間コンテンツ</h2>
<p>
スクロールを続けると、上の緑色の見出しが画面の上部に固定されているのがわかるはずです。
</p>
<p>
このプロパティを使用することで、JavaScriptを用いることなく、純粋なCSSだけでこのような動的な振る舞いを実装できます。そのため、ページの読み込み速度やパフォーマンスにも良い影響を与えます。モバイルデバイスでの表示にも柔軟に対応できるため、現代のレスポンシブデザインにおいて不可欠なツールと言えるでしょう。
</p>
<p>
ユーザーがコンテンツを読み進める中で、ナビゲーションバーや特定の情報が常に視野に入っていることで、迷うことなく操作を続けられます。これは、ウェブサイトのエンゲージメントを高める上でも非常に効果的です。
</p>
<p>
また、セクションごとの見出しをスティッキーにすることで、読者が現在どの部分を読んでいるのかを一目で把握しやすくなり、長い記事の読解を助ける効果も期待できます。
</p>
<p>
デザインの自由度も高く、`top`や`bottom`などのプロパティを調整することで、固定される位置を細かく制御できます。影やトランジションを追加することで、より洗練された見た目にすることも可能です。
</p>
</div>
<div class="content-section">
<h2>さらに下のコンテンツ</h2>
<p>
スティッキー要素は、その親要素の範囲内でのみ粘着します。この例では、親要素（body）の範囲を離れることはありません。
</p>
<p>
この機能は、特にECサイトの商品詳細ページや、ブログ記事、オンラインドキュメントなど、情報の量が多いページでその真価を発揮します。ユーザーが目的の情報に素早くアクセスできるよう、効果的に活用していきましょう。
</p>
<p>
CSSの進化によって、これまでJavaScriptに頼っていた多くのインタラクティブな要素が、よりシンプルに、そして効率的に実装できるようになりました。`position:
sticky`もその恩恵の一つです。
</p>
</div>
</body>
</html>
プレビュー
