CSS position sticky スクロールと共に動く

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

目次	positionのsticky
	ある位置に来ると指定の要素が縦スクロールと共に動く(sticky)
	親要素の高さの範囲で動く
	親要素にoverflow:hiddenがあると動作しない

positionのsticky

書き方	position : 値
	sticky ある位置に来るスクロールと共に動きます。ウィンドウの表示領域を基準とした配置になります。 stickyはねばねばという意味です。
	positionプロパティの値として他にstatic,relative,absolute,fixedがあります。
	stickyは、親要素の高さの範囲でのみ動きます。
	親要素にoverflow:hiddenがあると動作しません。
	この表の下にある水色の四角はstickyを指定しています。ある位置に来るとスクロールと共に動きます。
初期値	static
継承	なし
参考(MDN)	https://developer.mozilla.org/ja/docs/Web/CSS/position

stickyのテスト

ある位置に来ると指定の要素が縦スクロールと共に動く(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は縦に動きません。