CSSのposition:stickyを使ったスクロール特定範囲の固定方法

サイドバーやコンテンツで一定範囲、スクロールに追随する要素の作り方のご紹介です。
まずは、デモで動きを確認してみよう。

DEMO

HTML

<div class="demo1">
  <div class="demo1_contents">
    <p><span>1</span></p>
    <p><span>2</span></p>
    <p><span>3</span></p>
    <p><span>4</span></p>
    <p><span>5</span></p>
    <p><span>6</span></p>
    <p><span>7</span></p>
    <p><span>8</span></p>
    <p><span>9</span></p>
    <p><span>10</span></p>
  </div>
</div>

CSS

.demo1 {
  width: 100%;
  height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px solid #c3c3c3;
  border-radius: 24px;
}
.demo1_contents {
  width: 100%;
  height: 6000px;
}
.demo1_contents p {
  width: 100%;
  height: 600px;
  margin: 0;
}
.demo1_contents p span {
  position: -webkit-sticky;
  position: sticky;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 10%;
  height: 76px;
  display: block;
  color: #fff;
  font-weight: bold;
  font-size: 33px;
  padding-top: 8px;
  text-align: center;
}
.demo1_contents p:nth-of-type(1) span {
  background: #e04b4b;
  left: 0%;
}
.demo1_contents p:nth-of-type(2) span {
  background: #e0a04b;
  left: 10%;
}
.demo1_contents p:nth-of-type(3) span {
  background: #e0da4b;
  left: 20%;
}
.demo1_contents p:nth-of-type(4) span {
  background: #9ae04b;
  left: 30%;
}
.demo1_contents p:nth-of-type(5) span {
  background: #4be079;
  left: 40%;
}
.demo1_contents p:nth-of-type(6) span {
  background: #4bd7e0;
  left: 50%;
}
.demo1_contents p:nth-of-type(7) span {
  background: #4b56e0;
  left: 60%;
}
.demo1_contents p:nth-of-type(8) span {
  background: #ac4be0;
  left: 70%;
}
.demo1_contents p:nth-of-type(9) span {
  background: #e04bb7;
  left: 80%;
}
.demo1_contents p:nth-of-type(10) span {
  background: #e04b4b;
  left: 90%;
}

position:stickyの動きを解説

「position:sticky」は親要素の高さ分、固定される要素です。
固定される位置は「sticky」を指定している要素で決定します。
このデモでいうと、親要素は「.demo1_contents p」で固定する要素が「.demo1_contents p span」になります。
「sticky」を使う場合に、ベンダープレフィックスを付けないと、挙動がおかしくなるブラウザがあるので注意してください。
IE11とandroid4.4以下には対応していません。
Can I use｜sticky