要素をCSSの位置に固定する方法：スティッキー

序章

過去にrelativeおよびabsoluteの値でCSSpositionプロパティを使用したことがあるかもしれません。 最新のWebブラウザーは、sticky値をサポートするようになりました。 スクロールが特定のポイントに達したときに要素を固定することができます。

position: stickyの要素は、指定されたポイントに到達するまでは比較的配置された要素のように動作し、その後、静的に配置された要素のように動作し始めます。

この記事では、position: stickyを使用して、その動作と機能を理解する例を作成します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

• CSSプロパティと値の理解。
• コードエディタ。
• position: stickyをサポートする最新のWebブラウザ。

position: stickyを使用する

フレックスコンテナとなるdivコンテナについて考えてみます。 内部にネストされるのは、フレックスアイテムとなる4つの追加のdiv要素です。 4つのdiv要素には、shark-1、shark-2、shark-3、およびshark-4の画像が含まれます。

コードエディタで、次のマークアップを使用します。

<div class="container">
  <div class="item shark-1">
    <img
      src="/images/punk.png"
      width="100"
      alt="Sammy the Shark with a punk theme."
    >
  </div>
  <div class="item shark-2">
    <img
      src="/images/pony.png"
      width="100"
      alt="Sammy the Shark with a magical pony theme."
    >
  </div>
  <div class="item shark-3">
    <img
      src="/images/dino.png"
      width="100"
      alt="Sammy the Shark with a dinosaur theme."
    >
  </div>
  <div class="item shark-4">
    <img
      src="/images/steampunk.png"
      width="100"
      alt="Sammy the Shark with a steampunk theme."
    >
  </div>
</div>

そして、次のスタイルを追加します。

.container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px dashed rgba(114, 186, 94, 0.35);
  height: 400px;
  background: rgba(114, 186, 94, 0.05);
}

.shark-1 {
  position: sticky;
  top: 0;
}

.shark-2 {
  position: sticky;
  top: 4rem;
}

.shark-3 {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
}

この例では、フレックスコンテナのalign-items: flex-startルールが重要です。そうしないと、フレックスアイテムのデフォルト値がstretchになり、要素がコンテナの高さ全体を占めるため、スティッキー効果がキャンセルされます。

このファイルを保存して、最新のWebブラウザーで開きます。

上下にスクロールして、stickyの動作を観察します。 スティッキーに配置された要素が、親要素内でのみスティッキーであることに注意してください。