MEGUMI

スクロールに応じてサイドバーを固定/追従させる方法!(CSSのみ)

CSS position:sticky

広告などをサイドバーに固定/追従させるときに、JavaScriptやjQueryプラグインを使ってはいませんか?

スクロールした量や位置を計算して、関数を作って…
と何だか難しそうで、実装するのを諦めてしまった人もいるかもしれません。

が、しかし!!

実はCSSだけで実装できるんです。
しかも超簡単に。動きも滑らかだし、これは使わない手はありません!

ということで、実装方法をシェアしてみたいと思います。

 

サイドバーを固定/追従させる方法

まずは実装済みのデモサイトをご覧ください。

 

HTML

 

CSS

すごく簡単ですよね。

固定したい要素に対して、「position: sticky」と位置(top, right, bottom, leftのうち少なくとも1つ)を指定するだけです。

今回はスクロール中に固定したい要素に対してstickyというclass名をつけました

topは10pxに指定しているので、要素が上端から10pxの位置に到達するまでは「position: relative」のように振る舞い、到達すると、「position: fixed」のように固定されます。

 

 

position: stickyの注意点

position: styickyには使用する上でいくつか注意すべき点があります。

 

親要素の高さ(レイアウト)

親要素(サイドバー)の高さをメインコンテンツと揃える必要があります。

なのでtable-cellやfloatでレイアウトしていると上手く動作しない場合があります。

デモサイトではflexboxを利用し、サイドバーの高さがメインコンテンツと同じになるようにしています。

 

overflow: hidden問題

実はこれで僕もハマったのですが、position: stickyというテクニックは、親や先祖要素にoverflow: hidden(scroll, auto)が使われていると上手く動作しません

現状はoverflowの初期値であるvisibleの時のみ機能するようです。

僕は親要素にoverflowなんて使ってねえよ!!と思っていたのですが、レスポンシブデザインで画面幅を小さくすると、サイドにスクロールできなくなるようbody要素にoverflow-x: hiddenを指定していました。上手く機能しない人は本当にどこにもoverflowを設定してないかもう一度確認してみてください。

 

対応ブラウザ

ほとんどのブラウザでは対応済みとなっていますが、残念ながらIEでは使用できません。

ということで下記にてIEでも使用できるPolifillをご紹介します!

Polifillとは

最近の機能をサポートしていない古いブラウザで、その機能を使えるようにするためのコードのこと。大抵はWeb上のJavaScriptを指す。

 

IE11への対応

position: stickyのPolifillとして今回ご紹介するのが、「sticky-state」です。

jQueryを併用しなくても使用できるのでオススメなのですが、少しばかりJavaScriptを書く必要があります。

 

① sticky-stateのインストール

GitHubのページにアクセスし、右上のClone or downloadと書かれている緑色のボタンをクリックしてください。
すると、メニューが開くので、「Download ZIP」をクリックしてダウンロードします。

zipフォルダの解凍後、distフォルダの中にある

  • stick-state.css
  • stick-state.js
  • stick-state.min.js

を使用します。

 

② ページへの読み込み

jsファイルをhtmlファイルにscriptタグを使って読み込みます。(ファイルのパスはお使いの環境に合わせてください)

次にcssファイルも同じように読み込みましょう。

注意点

読み込んだcssファイルは固定したい要素に「sticky」というclass名をつけた時のみ機能します。sticky以外のclass名をつけた場合は読み込むcssファイルを直接編集してください。

 

③ JavaScriptの実装

htmlファイルに直接、もしくは外部ファイル化でJavaScriptを記述してください。

デモサイトでは

のように外部ファイル化をしてscript.jsにて実装しています。

 

コードは下記の通りです。

 

まとめ

いやー、CSSだけで実装できるのは本当に便利ですよね。

サイドバーの固定に限らず、スクロールしても記事内の見出しが上部に固定されているレイアウトも今回のテクニックを利用しています。

IEへの対応やoverflow: hidden問題が少々面倒ですが、それを考慮しても試す価値は十分にあると思うので、みなさんぜひ参考にしてみてくださーい。

ではでは(o´・ω・`o)ノシ