CSS3 には、 CSS2 には無かったような便利なプロパティが追加されています。今回、特に注目してみたのが position: sticky というプロパティと値です。 これによって、 今までは JavaScript を使わないとできなかったことが、 CSS だけで実現できるようになりました。

CSS3の使うタイミングってないよね

受託なんかをやっていますと、 CSS3 は、対応ブラウザが少ないため、なかなか、使う機会に巡り会えないのです。しかし、個人開発などではむしろバンバン使ってみたいものです。「たまには羽を伸ばして開発したい！」ということで遠慮なく使ってみることにします。

position: sticky

position は、 static が初期値です。なので、ほとんどの要素は static です。何もしないでいいから、そこにいてねってやつですね。

それに対して、 fixed というのがいまして、こいつが、付いてくるやつです。指定された位置を 画面を基準に 付いてきます。これが、結構厄介で、画面を基準にいつまでもだらだらと付いてくるもんだから、「それ以上は進まないで！」ということができませんでした。

この悩ましい問題を解決したのが、 sticky です。こちらも、 画面を基準に はついてくるのですが、「ただし、親の要素の中に限るよ」というものになります。親の要素、つまり外側のDOMより外に飛び出して付いていくことがなくなります。「それ以上は進まないで！」を可能にしたわけです。

対応ブラウザについて

対応ブラウザは、まだまだ少ないです。なので、非対応ブラウザのためのコードは、 position: static にしておくなどの工夫が必要かもしれません。

MDNのサイトより

でも、基本的に、このプロパティが使えない場合は、 static 動かないだけです。有害な動きはしないために、あまり神経質になる必要はありません。ページトップやサイドバーなど、別に動いても動かなくてもどっちでもいい要素に使ってみるとよいでしょう。

実装方法

今回は、当ブログのサイドバーに適応してみました。

Safari のためにベンダープレフィックス、 -webkit- を付けないといけないみたいです。でも、追加すべきコードはたったのこれだけです。

.sidebar { 
  top: 0; 
  position: -webkit-sticky;
  position: sticky;
}

そして、外側の要素に、 flexbox などを使うと、簡単に、高さを揃えられるので便利です。以下のようなコードで、左右のカラムの高さを一緒にしています。

.blog-one-columns {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}

欲を言えば、 flex プロパティが使えなくても、古いブラウザでレイアウトが崩れないように左右のカラムには、幅指定と float 指定をして、外側の要素、 .blog-one-columns には clearfix を付けておくと良いでしょう。

実装結果

PC の最新の Chrome や Safari などで当ブログを開きのサイドバーを見ながら上下にスクロールしてみてください。ちゃんと、サイドバーの枠を飛び越えないことも確認できますね。

JavaScript を使わなくてもスムーズに付いてくるサイドバーがだんだん可愛く見えてきますね！

この記事を読んだあとに

• 書いた人のツイッター – Follow me!
• 『売上を3年連続20%成長させた18の秘訣』
• 運営しているアクションゲーム