要素をスクロールした際に固定する
便利なプロパティPosition-Stickyの使い方

2023.06.22 CSSプロパティのPositionStickyの使い方

はじめに

概要

CSSのposition: sticky;は、要素をスクロールする際に固定された位置に保つためのプロパティです。このプロパティを使用すると、要素は一時的に固定された状態でスクロールされ、指定した位置までスクロールすると固定が解除されます。当サイトのサイドバーもposition: sticky;を使用しております。
実装に際して、注意すべき点にいくつか気づきましたので、詳細をご説明いたします。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

目的

position: sticky;の実装
プロパティが効かないときのチェックポイント

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>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="global-container">
      <div id="container">
        <header>header</header>
        <main id="top">
          <div id="main-container">
            <div class="wrapper">
              <div class="content">content</div>
              <aside>aside</aside>
            </div>
          </div>
        </main>
        <footer>footer</footer>
      </div>
    </div>
  </body>
</html>

style.css

body {
  font-size: 30px;

}

header {
  background-color: #3898e0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  height: 200vh;
}


.content {
  background-color: #a5c1ea;
  width: 65%;
  display: flex;
  justify-content: center;
  align-items: center;
}

aside {
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d5dfef;
  position: sticky;
  top: 0;
  height: 50vh;
}

footer {
  background-color: #cce4ff;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

上記のコードを表示すると以下のようにサイドバーが固定されるようになります。

プロパティが効かないときのチェックポイント

36行目のHTMLコードでは、top: 0;を使用してposition: sticky;が指定された要素を明確な位置に指定する必要があります。

37行目のHTMLコードでは、指定した要素が機能するためにheightを指定する必要があります。例えば、heigh: 50vh;のように要素の高さを指定します。要素が親要素内で固定されるため、親要素には適切な高さが必要です。

親要素にoverflow: hidden;が指定されていないかを確認してください。overflow: hidden;が指定されている場合、要素がスクロール可能な状態になりません。
ここでいう親要素の対象は、body/global-container/container/main/main-container/wrapperが対象になります。

position: sticky;は一部のブラウザでサポートされていない場合があります。特に、古いバージョンのインターネットエクスプローラーではサポートされていません。使用する場合は、ブラウザの互換性に注意してください。