CSSのposition:sticky;を使って各見出しやコンテンツヘッダーを固定する

Webページの構成の中で各セクションごとで見出しを載せてコンテンツを作っていきますが、コンテンツをよりわかりやすく見せるデザインとしてコンテンツごとに見出しをヘッダーに固定するといったデザインを採用しても面白いかもしれません。

グローバルナビゲーションをヘッダーとして置き、Webページの上部に固定するといったデザインはよく見かけますが、Webページをスクロールして見ていく中で各コンテンツごとの見出しをヘッダーに固定する場合ではCSSのpositionプロパティのstickyを使って実装していきます。
JavaScriptなどのプログラミングを使わなくてもCSSだけで実装できるのでとても便利です。

ここではCSSのpositionプロパティのstickyを使ってコンテンツヘッダーを上部に固定する方法をご紹介します。

ここからはサンプルを作ってご説明していきます。

各コンテンツの見出しを固定させる

まずは以下のようなHTMLで簡単にコンテンツを作っておきます。
セクションでコンテンツを分けて、各コンテンツに見出しと内容が入るといったものです。

HTML

<main>
  <h1>CSS 「position:sticky;」 Sample</h1>
  <section class="section-container">
    <h2 class="section-headline">HEADLINE SECTION 1</h2>
    <div class="section-conts">SECTION 1 CONTENT</div>
  </section>
  <section class="section-container">
    <h2 class="section-headline">HEADLINE SECTION 2</h2>
    <div class="section-conts">SECTION 2 CONTENT</div>
  </section>
</main>

続いて、CSSになります。
body,h1から各クラスに対して簡単に確認しやすいようにCSSを効かせています。
重要なところはクラス「section-headline」のスタイル部分です。

CSS

body {
  background: #e6ecf0;
}

h1 {
  text-align: center;
  padding: 40px 0 0;
}

.section-container {
  max-width: 800px;
  margin: 60px auto 0;
  background: #fff;
  padding: 20px;
}

.section-container * {
  background: #ddd;
  padding: 20px;
}

.section-headline {
  background: #aaa;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.section-conts {
  min-height: 1200px;
}

「position: sticky;」は指定した要素の親要素の表示範囲内で要素の固定ができます。
親要素の「section-container」の中に各セクションのコンテンツである子要素の見出し「section-headline」とコンテンツ「section-conts」があり、スクロールした際に見出しを固定させますのでsection-headlineにpositionプロパティでstickyを指定します。固定する位置はtopを「0」とすることで一番上に固定されます。固定するものによってポジションの位置をtop,left,right,bottomの数値で調整してもらえば。
こうすることで各コンテンツの位置までスクロールした際にそのコンテンツの見出しがヘッダーに固定されます。

Safariにも対応するためにベンダープレフィックスの記述「-webkit-」も忘れないようにしましょう。

以下、サンプルの実際の動きになります。
動画（2分）