1. Home
  2. プログラミング
  3. CSS3のposition: stickyを使ってみた

CSS3のposition: stickyを使ってみた

by ysawa

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 を使わなくてもスムーズに付いてくるサイドバーがだんだん可愛く見えてきますね!

この記事を読んだあとに


ysawa

エヌ次元株式会社代表取締役
東京工業大学工学部計算工学専攻卒業
符号理論の応用に関する研究
在学中よりフリーランスエンジニアとして活動
「持続可能な設計」を得意領域とする
会社設立後も設計からアプリ制作や
Webサイトのコーディングまでを幅広く担当
セキュリティスペシャリスト

 このブログについて

このブログは、プログラマやエンジニアのためになる情報を垂れ流しています。
ちょっと異端的なものも含まれているかもしれません。