【CSS】数行で要素を自在に追従できる「position: sticky」の仕組みと使い方を解説!!

更新日:

position: stickyとは?

stickyは「position: fixed」と同様に画面を基準にして、要素を追従させることが出来る機能です。
fixedと違う点は、fixedは常に画面固定なのに対して、stickyはスクロール量に応じて要素を画面固定にすることができます。

例えば、このstickyを使うことで、特定の要素が画面上部の位置に来た時、その要素の追従を開始する。
そんな実装が簡単に出来るようになります。

今までであれば、この動きを実装するにはJavaScriptが必要でした。
しかし、これからは「position: sticky」を使って簡単に実装することが出来ます!

ただ、stickyは比較的新しい値になります。
最近のブラウザでは基本的に対応していますが、制作予定のサイトで使えるのか確認しておきましょう!

[position: sticky]の対応状況

stickyの記述方法

stickyの使い方を紹介していきます!
といっても、記述方法はfixedの時と同じになります。

.hoge {
  position: sticky;
  top: 0;
}

これで「.hoge」が画面上部の位置に来た時に追従が開始されます。

実際に追従をするデモ画面を作ってみました。

ちなみに、top、right、bottom、leftの値はそれぞれ変えることが出来ます。
また、左右のポジションの値を変えると横スクロールのときに追従するようになります。

Top:60pxの場合

See the Pen sticky(Top:60) by カノト (@kanoto) on CodePen.

Right:0pxの場合

See the Pen sticky(Right:60) by カノト (@kanoto) on CodePen.

Bottom:0pxの場合

See the Pen sticky(Bottom:60) by カノト (@kanoto) on CodePen.

Left:0pxの場合

See the Pen sticky(left:60) by カノト (@kanoto) on CodePen.

stickyの仕組み

stickyを使い始めたときに必ず引っかかるのが、

なぜか、スクロールしても追従されない・・・。

という状況です。

stickyは便利な反面、直感的に使ってしまうと、要素が思ったように動かない場合があります。
stickyを上手に使うためには、その仕組みを理解しておくことが重要です。

原因は親要素の領域かも!?

stickyが思うように動かない原因は、おそらく

  • CSSの指定が間違っている
  • ブラウザが対応していない
  • stickyを指定している親要素の領域が狭い

など、様々あるかと思います。

そして、一番多くて厄介なのが「stickyを指定している親要素の領域が狭い」になると思います。
今回は3つ目について解説していきますね!

stickyは大前提として、親要素の領域しか動くことが出来ません

つまり、stickyを指定している要素の高さが40pxであり、それを囲っている親要素の高さも40pxの場合は上手く追従させることが出来ません

以下のコードが参考になると思います。

成功例

See the Pen sticky(成功例) by カノト (@kanoto) on CodePen.

失敗例

See the Pen sticky(失敗例) by カノト (@kanoto) on CodePen.

なので、「なぜか動かない!!」となったら親要素の領域を一度確認してみましょう!!

Copyright© カノトのアトリエ , 2019 All Rights Reserved Powered by STINGER.