CSS positionのstickyで要素を配置する

CSSのpositionプロパティのstickyで、要素を配置するサンプルです。

仕様	positionプロパティのstickyの仕様
サンプル	ある位置に来ると指定の要素が縦スクロールと共に動く
	親要素の高さの範囲で動く
	親要素にoverflow:hiddenがあると動作しない

positionプロパティのstickyの仕様

position : 値

positionプロパティのstickyは、ウィンドウの表示領域を基準として要素を配置します。

値	説明
sticky	ウィンドウの表示領域を基準とした配置になります。ある位置に来るスクロールと共に動きます。 stickyはねばねばという意味です。
値を継承しない

左上にある要素は、サンプルです。表示領域のtopとleftを指定しています。ある位置に来るとスクロールと共に動きます。
positionプロパティの値として、他にstatic,relative,absolute,fixedがあります。
以下はMDNのpositionプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/position

stickyのテスト

ある位置に来ると指定の要素が縦スクロールと共に動く

ある位置(topの30px)に来ると指定の要素が縦スクロールと共に動くサンプルです。

<style>
  #box1 {
    width: 150px;
    height: 30px;
    border: 1px solid #000;
    background-color: #c4cece;
  }
  #box2 {
    position: sticky;
    top: 30px;
    left: 20px;
    width: 150px;
    height: 30px;
    border: 1px solid #000;
    background-color: #e0ffff;
  }
</style>
<body>
  <p>positionのテスト</p>
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
</body>

9行目は、position:stickyです。
10行目は、topでウィンドウの上の位置から30pxを超えると要素も下にずれます。

ウィンドウ表示領域の左上を基準にします。

画面イメージは次のようになります。

スクロール前

縦スクロール後

親要素の高さの範囲で動く

stickyは、親要素の高さの範囲でのみ動きます。

<style>
  #box1 {
    width: 150px;
    height: 30px;
    border: 1px solid #000;
    background-color: #c4cece;
  }
  #box2 {
    position: sticky;
    top: 30px;
    left: 20px;
    width: 150px;
    height: 30px;
    border: 1px solid #000;
    background-color: #e0ffff;
  }
  #parent{
    height:300px;
  }
</style>
<body>
  <div id="parent">box1
    <div id="box1">box1</div>
    <div id="box2">box2</div>
  </div>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
</body>

22行目は、親要素です。
18行目は、heigthが300pxなので300pxのみ縦に動きます。

親要素にoverflow:hiddenがあると動作しない

stickyは、親要素にoverflow:hiddenがあると動作しません。

<style>
  #box1 {
    width: 150px;
    height: 30px;
    border: 1px solid #000;
    background-color: #c4cece;
  }
  #box2 {
    position: sticky;
    top: 30px;
    left: 20px;
    width: 150px;
    height: 30px;
    border: 1px solid #000;
    background-color: #e0ffff;
  }
  #parent{
    height:300px;
    overflow: hidden;
  }
</style>
<body>
  <div id="parent">box1
    <div id="box1">box1</div>
    <div id="box2">box2</div>
  </div>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
    <p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
</body>

23行目は、親要素です。
19行目は、overflow: hiddenがあるのでstickyは縦に動きません。