position:stickyを利用したスクロール時のヘッダー固定

はじめに

UIでスクロールするごとにヘッダーが入れ替わっていく仕様を実装するということになり、
最初はどうやって実現したものかと頭を抱えたのですが、調べてみると
cssのposition: stickyを使えば割と簡単に実現出来ることが分かったので、
今回はその実装例を挙げてみようと思います。

css position:sticky について

まずは、position: stickyを利用するとどのような挙動を実現出来るのか
サンプルを見てみましょう。
https://developer.mozilla.org/en-US/docs/Web/CSS/position
こちらのサイトのTry it欄のposition: sticky;top: 20px
を選んで実際にスクロールさせてみましょう。

するとスクロール後に黄色の四角が定位置に留まっていることが分かります。
この仕様を利用すると、スクロール時に特定の見出しを定位置に固定することが出来ます。

実装

では、実際にVue3を使って実装してみましょう。

ソースコード

全体のソースコードはこのようになります。

<template>
  <div class="container">
    <div>
      <p class="title1">title1</p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat.
    </div>
    <div>
      <p class="title2" >title2</p>
      <p class="subtitle2" >subtitle2</p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat.
    </div> 
    <div>
      <p class="title3">title3</p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 300px;
  height: 150px;
  overflow-y: scroll;
}

.title1 {
  position: sticky;
  top: 0;
  color: white;
  background-color: red;
}

.title2 {
  position: sticky;
  top: 0;
  background-color: lightgreen;
  margin: 0;
}

.subtitle2 {
  position: sticky;
  top: 20px;
  color: white;
  background-color: green;
  margin: 0;
}

.title3 {
  position: sticky;
  top: 0;
  background-color: lightblue;
}
</style>

ポイント解説

実装時のポイントを説明していきます。
まずクラス名をcontainerとしているこの親要素に
overflow-y: scrollを定義することでスクロール機能を持たせます。
これを定義しなくてはstickyを設定しても上手く機能してくれません。

子要素としてtitle1,title2,subtitle2,title3が定義してありますが、
これら全てのstyleに設定してある

• position
• top

これら2つが今回の実装で大切なポイントになります。

positionをstickyと設定された要素はスクロール時に特定の位置に固定されます。
その位置を決めるものがtopになります。
このtopを0と設定することで親要素内の一番上に固定されるようになります。

subtitle2のtopのみ0では無く20pxとなっていますが、
これはtitle2のすぐ下にsubtitle2を固定するために
オフセットしているということになります。
つまりこの20pxという値はtitle2の縦幅ということですね。

これを実際に動かしたgifがこちらになります。

title達がスクロール時に入れ替わって上部に固定されていること、
title2が上部に固定されている時はsubtitle2がくっついていることが分かると思います。

さいごに

cssはなかなかに複雑で、実装中に泣かされることも多いですが
上手く使えばカッコいいUIを実現出来て、それだけで見栄えを大きく変えることが出来ます。
根気強く学んでいきたいところですね！