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

CSSのposition:stickyを使ったスクロール特定範囲の固定方法 CSS
この記事は約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

SNSフォローボタン
エンデ・バタローをフォローする
CSSサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

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

コメント

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