要素をスクロールに追随させたいならsticky！

2019/9/9 2019/11/29

画面のスクロールに合わせて特定の要素が追随してくるようなWEBサイトを見たことがありませんか？

ヘッダー部分がページの先頭から終わりのスクロールまでずっと付いてくるというような追随の仕方ではなく、スクロールの途中に出現した要素が、それからずっと付いてくるような感じの追随です。

このブログをPCで見ている場合、サイドバーにある「もくじ」がそのような感じになってます

こういう仕組みを見るとjQueryなどで実装してそうな感じがありますが、CSSだけで簡単に実装することができます。

今日はサイドバーの要素をスクロールに合わせて追随させてみます。

1 実装
2 注意点
- 2.1 親要素や祖先の要素にoverflow: hiddenがあるとうまく使えないことがある
- 2.2 カラムの高さを揃えること
3 便利だと思います

実装

要素をスクロールにあわせて追随させるにはCSSのstickyというプロパティを利用します。

方法は簡単で

スクロールに追随させたい要素のpositionにstickyを設定する
top、bottom、left、rightで固定する位置を設定する

の2点です。

さっそく具体的にコードを書いていきたいと思います。

<body>
  <div id="wrapper">
    <header>ヘッダー</header>

     <div id="content">
      <main id="main">メイン画面</main><!-- /#main -->
      <aside id="secondery">
        <div class="widget widget1">1</div>
        <div class="widget widget2">2</div>
        <div class="widget widget3">3</div>
      </aside><!-- /#secondery -->
    </div><!-- /#content -->

    <footer>フッター</footer>
    
  </div><!-- /#wrapper -->
</body>

body {
  font-weight: 700;
  color: white;
  font-size: 30px;
}

#wrapper {
  width: 70%;
  margin: auto;
}

header {
  height: 100px;
  line-height: 100px;
  background: red;
  text-align: center;
}

#content {
  display: flex;
  height: 1000px;
}

#main {
  width: 70%;
  background: green;
  line-height: 1000px;
  text-align: center;
}

#secondery {
  width: 29%;
  margin-left: auto;
}

.widget {
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.widget1 {
  background: orange;
  margin-bottom: 10px;
}

.widget2 {
  background: brown;
  margin-bottom: 10px;
}

/* stickyの設定と位置の調整 */
.widget3 {
  background: pink;
  position: sticky;
  top: 10px;
}

footer {
  height: 100px;
  line-height: 100px;
  background: blue;
  text-align: center;
}

ヘッダー、フッター、メイン画面とサイドバーで構成された、ブログなどでよく見かけるオーソドックスな構成です。

こちらがデモになります。

スクロールさせてみてください。

See the Pen sticky by konpure (@yuntu) on CodePen.

スクロールによりサイドバーにあるピンク色の「3」という要素が出現すると、その後ピンク色の「3」はメイン画面のスクロールに合わせて追随してくるのが解ると思います。

このピンクの「3」という要素にはCSSで「position: sticky」と「top: 10px」が設定されています。

ですので画面をスクロールしてサイドバーに「3」の要素が現れると、topから10pxの位置で固定されてスクロールに追随するようになります。

topの数値を変更することで追随するときの要素の位置を自分の好きなように変更することが出来ます。