要素を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の動作を観察します。スティッキーに配置された要素が、親要素内でのみスティッキーであることに注意してください。

警告：position: sticky要素が意図したとおりにウィンドウに貼り付けられない2つの一般的なシナリオがあります。

はめ込みプロパティが定義されていません。スティッキー要素にtopまたはbottomが設定されていることを確認してください。または、水平スクロールの場合は、leftまたはright。

要素の祖先の1つに互換性のないoverflowがあります：スティッキー要素の親または祖先のいずれかでoverflowがhidden、scroll、または[ X163X]。これは、overflow-xおよびoverflow-yにも当てはまります。

1番目と2番目のサメは、ビューポートによって確立された収容ブロックのtopに対して粘着性があります。 3番目のサメは、ビューポートによって確立された包含ブロックの下部に対して粘着性があります。 4番目のサメはposition: stickyが割り当てられていないため、スティッキーな位置にスクロールしません。

結論

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

2020年の時点で、95% ofブラウザはposition: stickyをある程度サポートしています。詳細については、 CSSの位置を使用できますか：stickyを参照してください。古いバージョンのSafariには、-webkitベンダープレフィックスが必要です。 Webアプリケーションに組み込む前に、ターゲットオーディエンスがこの機能を利用できることを確認してください。

CSSの詳細については、CSSトピックページで演習とプログラミングプロジェクトを確認してください。

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

序章

前提条件

position: stickyを使用する

結論

`position: sticky`を使用する