今回は、positionプロパティの値の中でも比較的新しめの「sticky」について解説します。
「sitcky」は日本語にすると「粘着する」という意味になります。その名の通り、スクロールした時に要素を指定した位置に貼り付かせることができます。同じように要素を固定できるfixedとの違いも併せて覚えておきましょう。
positionプロパティの基本については「CSSのpositionプロパティを学ぼう」で解説しました。確認したい方は以下の記事をご覧ください。
要素固定のやり方を学ことで、Web制作における表現の仕方を増やすことができます。この記事でどのように使えるのか一つずつ理解していきましょう。
- スクロール時に要素を固定する方法
- stickyとfixedの違い
stickyとは
stickyは、スクロールした際に要素を粘着させ、固定表示することができます。
使用する際は、親要素と子要素を準備して、子要素に対してstickyを記述します。
このとき親要素を「Sticky Container」といい、子要素は「Sticky Item」といいます。
親要素を用意することで、スクロールした時に固定される（以下追従する）範囲を指定することができます。
特徴
- 追従する範囲を指定できる
- 追従が開始されるとfixedのように要素が固定される
実際に動きを確認してみよう
ベースとなるコード
まずは下記のコードを確認してください。（×0.5、×0.25にすると全体を見ることができます）
See the Pen sticky Base by ZeroPlus (@zeroplus-programming) on CodePen.
こちらのコードをベースに説明していきます。今はまだ何もしていない状態です。
position: sticky;を加えたコード
下記がstickyを加えた動きになります。（×0.5、×0.25にすると全体を見ることができます）
See the Pen sticky by ZeroPlus (@zeroplus-programming) on CodePen.
ZeroPlusMediaという見出しがスクロールすると追従し、次の見出しが出てくると、入れ替わり、また追従が開始されているのが確認できると思います。
冒頭で説明しているstickyの親要素の部分が.sticky-containerで、今回は分かりやすく青い点線で囲っております。
そして、子要素の.sticky-itemにstickyを与えることで追従ができるようになっています。
ポイントとして覚えていただきたいのは.sticky-itemは、.sticky-containerから出ることはないということです。
fixedを使う際と、stickyを使う際では、この仕組みが少し変わるので、覚えておきましょう。
stickyとfixedの違い
positionの中で位置を固定する力を持つstickyとfixedですが、それぞれ若干仕様が異なります。
fixedの固定の位置は、ウィンドウの左上（起点となる位置）を基準にした絶対位置に配置されます。
また、fixedを指定した要素は高さがなくなるのも特徴の一つです。
一方でstickyは、親要素内で固定されます。よって、要素の幅や高さも親要素を基準に固定されます。
そのため、親要素を基準にしているためstickyは高さが無くなることもありません。
ただし、親要素を基準にするため、親要素のどこに固定するのかの位置の指定は必須となりますので注意しましょう。
| 値 | 固定位置の基準 | 要素の高さ | 位置の指定 |
| sticky | 親要素 | 無くならない | 必須 |
| fixed | ウィンドウの左上 | 無くなる | 必要ない |
stickyを使用する際の注意点
stickyを使用する際、以下の点に気を付けてください。
topを指定すること
positionを使用する際に表示位置をtop、leftなどで指定しますが、stickyも同じく位置を指定しないとうまく動きません。使用する際は必ずtopを指定しましょう。
高さを確保する
メイン部分とサイドバーがある2カラムレイアウトで、サイドバーをstickyで固定させたい場合があるかもしれません。その時に、flexboxを用いて横並びさせていたら、align-itemsの値をflex-startと指定しましょう。mainとasideをflexboxを用いて横並びすると、そのままではalign-items: strech;が適用されて、うまくstickyが適用されません。これはasideもmainと同じ高さを持ってしまうため、固定される高さが無くなるからです。
親要素にoverflow: hidden;は指定しない
親要素にoverflow: hidden;を指定すると、はみ出した要素と認識されてしまい、stickyが動きませんので指定しないようにしましょう。
まとめ
今回はスクロールしたときの要素固定に使えるCSS、stickyとその仲間であるfixedの違いを解説しました。
- stickyを使用すると、親要素の中で要素を固定できる
- fixedとの違いは、固定の範囲・高さが残るか・固定位置の基準がある
まずはここを理解できていればOKです！
実際にコードを書いて動きを確認する方がわかりやすいと思うので、アウトプットを通して動きをぜひ見てみてください！
