【第5のpositionプロパティ】stickyの使い方【CSS】

今回はCSSのpositionプロパティの1種、
stickyの使い方についてまとめたいと思います。

relative, absolute, fixedに比べるとあまり有名でないイメージですが、
スクロールに応じて要素を固定することができる便利なプロパティです。

stickyの使い方と特徴

position: sticky;の使い方

他のpositionプロパティと同様、top, right, bottom, leftを組み合わせて使います。
position: sticky;とし、top, right, bottom, leftで固定したい位置を指定していきます。

位置の固定ということでfixedと似ているかんじがしますが、どこがちがうのでしょうか。

stickyの特徴

fixedはずっと同じ場所に固定され、スクロールの有無を問わず位置が変わりません。

一方で、stickyははじめから同じ場所に固定ではなく、
指定位置に要素が到達してから固定されます。

また要素が固定位置に到達したら、ずっと同じ場所に固定されるのではなく、
固定位置の親要素が画面に収まらなくなった場合、
普通の要素と同様スクロールで画面外に押し出されます。

fixedとstickyの特徴まとめ

言葉だけだとなんだか分かりにくいので、2つの具体例をみてみたいと思います。

具体例1：スクロールしてメイン画像を通りすぎるとナビゲーションが固定される

See the Pen
oNjbMLm by notebook (@orange-notebook)
on CodePen.

デフォルトでは、ナビゲーションの上にメイン画像があります。

スクロールしていきナビゲーションが画面上部に到達すると、
引き続きスクロールしても上に固定されたままになります。

ナビゲーションの親要素であるheaderタグに
position: sticky;とtop: 0;を指定しています。

HTML

<div class="header-image">
  <img src="https://picsum.photos/1000/800" alt="">
</div>
<header class="header">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Service</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section class="section one">
  <h2>Section One</h2>
</section>

<section class="section two">
  <h2>Section Two</h2>
</section>

CSS

こちらはSass(SCSS)で書いています。

.header-image {
  width: 100%;
  height: 70vh;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
}

.header {
  height: 50px;
  background: lightblue;
  position: sticky;
  top: 0;
  
  nav ul {
    display: flex;
    width: 50%;
    margin: 0 auto;
    
    li {
      list-style: none;
      width: 25%;
      text-align: center;
      border-right: 1px solid white;
      
      &:first-child {
        border-left: 1px solid white;
      }
        
      
      a {
        text-decoration: none;
        color: #333;
        line-height: 50px;
        display: block;
        font-size: 18px;
        letter-spacing: 1.5px;
      }
      
    }
    
  }
  
}

.section {
  display :flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
  &.two {
    background: whitesmoke;
  }
}

具体例2：スクロールに応じて、対応するセクションタイトルが左上に固定される

See the Pen
dyYrMmG by notebook (@orange-notebook)
on CodePen.

左側にセクションのタイトル、右側にセクションの中身があります。

スクロールすると、右側の中身に合わせて、
左側のセクションタイトルが左上に固定されます。

セクションのタイトルであるh2タグにposition: sticky;とtop: 20px;を指定しました。
(20pxは右側の中身と高さを合わせるためのpadding分です。)

1つ目の例では、ナビゲーションはずっと上に固定されたままでした。

しかし今回はsectionタグが左側のタイトルと右側の中身をおおう親要素となっています。

そのためスクロールで親要素であるsectionタグが
画面外に押し出されるのと同時に、左側のセクション番号も移り変わっていきます。

HTML

<section>
  <div class="section-name">
    <h2>Section 1</h2>
  </div>
  <div class="section-content">
    <p>
      セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。セクション1です。
    </p>
  </div>
</section>
<section>
  <div class="section-name">
     <h2>Section 2</h2>
  </div>
  <div class="section-content">
　　<p>
      セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。セクション2です。
    </p>
  </div>
</section>
<section>
  <div class="section-name">
     <h2>Section 3</h2>
  </div>
  <div class="section-content">
    <p>
      セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。セクション3です。
    </p>
  </div>
</section>

CSS

こちらもSass(SCSS)で書いています。

section {
  height: 100vh;
  display: flex;
  
  .section-name {
    flex: 0 0 28%;
    background: steelblue;
    padding: 20px 0 0 20px;
    
    h2 {
      color: white;
      position: sticky;
      top: 20px;
      font-size: 25px;
      letter-spacing: 1px;
      font-weight: normal;
    }
  }
  
  .section-content {
    flex: 1;
    background: aliceblue;
    padding: 20px;
    
    p {
      font-size: 15px;
      line-height: 1.5;
    }
  }
}

以上、position: sticky;の使い方でした。

最後までお読みいただき、ありがとうございました。