作成方法：粘着要素

CSSを使用して粘着要素を作成する方法を学びます。

自分で試してみてください

注意：この例は、Internet ExplorerやEdge 15及以前のバージョンでは適用されません。

粘着要素

インスタンス

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

自分で試してみてください

position: sticky; を使用する要素は、ユーザーのスクロール位置に応じて定位されます。

粘着要素は、相対定位と固定定位の間でスクロール位置に応じて切り替わります。視口内に指定されたオフセット位置に達するまで、相対定位となります。その後、その場所に「粘着」します（position:fixedのようです）。

注意：Internet Explorer、Edge 15 及以前のバージョンでは、粘着定位がサポートされていません。Safari では、-webkit-プレフィックスが必要です（以下の例を参照してください）。粘着定位が有効になるためには、top、right、bottom、left の少なくとも1つを指定する必要があります。

関連ページ

チュートリアル：CSS定位