追随あれこれ

Webページで部品を追随させるようにするcssの書き方集。 昔は結構苦労した気がするけど、CSS3だと結構楽に書けるようになってる(・∀・)ｲｲﾈ!!

• position: fixedを使った方法
• position: stickyを使った方法
• FlexBoxを使った方法

他にもあるかもしれないけど、今回はこの3つについてそれぞれ見ていきます。

position: fixedを使った方法

これはCSS3以前の従来の書き方と思います。
HTML部品を固定させますが、top, leftなどで位置の指定が必要になります。
position: relative等を駆使すれば指定しなくて良いやり方もあった気がしますが、、
面倒なので割愛しますｗ

↓スクロールしてみてください。 followがスクロールに追随します。

See the Pen Scroll Follow 1 by HIROMITSU Daisuke (@daisuke718) on CodePen.

position: stickyを使った方法

画面の上にぴたっと張り付いてスクロールします。
親要素が画面内にいる間だけ追随してきます。
スマホサイトなどのトップバーなどに使われるようです。
この方法ですが、残念ながら現在Chromeではサポートされてません＞＜
Firefoxなどで見てもらうと追随が確認できると思います。

ブラウザサポート状況：
Can I use... Support tables for HTML5, CSS3, etc

See the Pen Scroll Follow 2( sticky ) by HIROMITSU Daisuke (@daisuke718) on CodePen.

FlexBox を使った方法

モダンな書き方がこれみたいです。
こちらはどのブラウザでも動く模様。
HTMLもシンプルで、上記position: fixedの改良版と言った感じです。
追随を実現させるために使いましたが、Flexboxはそのためだけの機能では無いようです。
結構奥深そうなので、フロントエンジニアの方は勉強しておいた方がいいかも。

See the Pen Scroll Follow 3( FlexBox ) by HIROMITSU Daisuke (@daisuke718) on CodePen.

まとめ

最初にも書きましたが、昔はjsとかHTMLの工夫とかで苦労して書いてたのが簡単に書けるようになっててすごく良い。
stickyとFlexboxは用途によって使い分けすると良いかなという感じです。
ただ、position: stickyがChromeで動かないのが痛い。 Chromeさん対応待ってます！！