CSS で要素をスクロールに追従させる

はじめに

こちらのサイトのイベントページのように、
ある要素をスクロールしても特定の位置に固定したい時がありました。
今までは javascript を使って実装していましたが、CSS でもできるので今回は CSS で実装します。

実装

hogehoge.html.haml

#sub_colum
  追従する要素

hogehoge.scss

#sub_column{
  position: -webkit-sticky;
  position: sticky;
  top: 0; // 上部 0px の位置に固定
}

上記コードで #sub_column は、要素が指定した位置まで来ると position: fixed; のように振る舞ってくれます。

まとめと注意点

javascript でやるよりもずっと楽に実装できました。
しかしまだ対応していないブラウザもあるので注意が必要です。IE とか Opera Mini は対応していません(対応表はこちら)。

ただ個人的には対応していないブラウザでは要素が追従してこないだけなので、そこまで気にしなくていいのかなーと思っています。
が、追従にならないのが気になる方はStickyfillを使えばいけるらしいです。