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

CSSのposition:stickyを使ったスクロール特定範囲の固定方法
この記事は約4分で読めます。

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

DEMO

1

2

3

4

5

6

7

8

9

10

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

CSSサイト制作

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

タイトルとURLをコピーしました