bootstrapで固定サイドバーを付ける方法（affix、sticky、flexbox）
affix、sticky、flexboxで固定サイドバーを実装したサンプルをご紹介しています。
基本的にはposition:stickyを使うのが無難でしょう。bootstrap4には固定を指定できるユーティリティが用意されています。
いずれもPC版専用であり、スマホ版では機能を解除していますので固定はされません。
affixで固定サイドバーを付ける方法
まずは少し前のバージョンとなる「bootstrap3」の機能を使った、固定サイドバーを付ける方法をご紹介します。
bootstrap3には「affix」というjavascriptの機能があり、これを使う事でサイドバーを固定する事ができます。
bootstrap3にはaffixしか用意されていない
今から新規にサイト設計をするなら、このaffix機能をあえて使う事は無いでしょう。
ただ、他人が作ったWEBサイトを扱う中でbootstrap3を導入しているサイトに出くわすかも知れません。
bootstrap3ではposition:sticky が用意されていないので、条件次第ではaffixを使う必要がありますね。
サンプル
スマホでは正常に動きませんのでご了承下さい。
実装の仕方：data-spy="affix"を使う
スクロールに追従させたい要素に、data-spy属性を追加してaffixを指定します。
<div class="sidebox" data-spy="affix">
これだけで固定する事ができます。
jsファイルの指定をチェック
「affix」はjavasciptの機能ですので、bootstrap3.cssがあるだけでは動きません。
<script src="../../js/jquery-1.12.4.min.js"></script> <script src="../../js/bootstrap.min.js"></script>
フッターにjqueryとbootstrap.min.jsが設定されているかどうかをきちんと確認しましょう。
固定開始位置の指定
少しスクロールした後に追従させたい場合は、続けてdata-offset-top属性を追加します。
本サイトの様に、サイドバーの上に一定の高さのヘッダーコンテンツがある場合はdata-offset-topの設定が必要ですね。
<div class="sidebox" data-spy="affix" data-offset-top="100"> 上記は上から100pxスクロールしたら固定が開始されます。
ページ上端から対象の要素までの高さを算出して「px」指定しましょう。
そうすれば、丁度サイドバーが画面上部から見切れると同時に固定される様になります。
終了位置の指定
逆に特定の位置で固定を解除したい場合、data-offset-bottom属性を追加します。
ページ下端から追従を終了する位置までの距離を算出して、「px」指定しましょう。
サイドバーの途中のコンテンツのみ途中から固定したい
サイドバー全部でなく、その中の一部のみスクロール時に固定したい場合があると思います。
その場合は、ページの最上段からその一部のコンテンツの始まりの「高さ」をどんなに長くなっても算出する必要があります。
正確な高さを出すのは難しいでしょうが、おおよその高さを入れて固定された時に違和感がないpxに調節すれば良いと思います。
注意：position: fixed中に幅が画面外に飛び出す
このaffix設定をした時に一番気になるのが、固定された後にボックスの横幅が変化する事です。
枠内100％の横幅指定
.sticky_box { background: #f1f1fd; padding: 40px; width: 100%; border: solid 1px #669900; }
上記の様に固定される要素には、枠内の100％という形で幅が設定していますよね。
ところがこの要素が固定されると、幅が外にはみ出してモニター画面の右端にまで伸びる事があります。
横に伸びる理由
affix設定は、CSS上は「position: fixed」の扱いになっています。
このposition: fixedが「親要素」に対してでなく、「画面枠」に対して機能してしまうのが原因です。
％指定ではなくpx指定をする事
これは横幅を％指定している場合にのみ起こりますので、px指定をすれば問題は起きません。
サンプルも実際に横幅をpx指定しています。
.sidebox_test.affix{ width: 312px; }
今は横幅をpx固定する事自体があまり無いし、指定する事でややこしくなる事もあるでしょう。
％指定でもJSで細かく設定すればカバーできますが、簡単に済ますのであればpx固定する形が一番無難です。
stickyで固定サイドバーを付ける方法
次は、position: stickyを使ったサイトに固定サイドバーを付ける方法です。
サンプル
実装の仕方：position: stickyを使う
「sticky」はbootstrap4で使えるpositionプロパティ値で、これを活用するユーティリティが新設されました。
position:stickyを使えば、要素の位置を簡単に固定できます。
.sidebar{ position: sticky; top: 0px; background: #f1f1fd; padding: 40px; width: 100%; border: solid 1px #669900; }
「top: 0px;」は固定位置の指定ですので、必ず設定するようにしましょう。
使いやすいsticky
position:stickyを設定された要素がページ上部に来ると固定されるので、data-offset-top等を設定する必要がありません。
サイドバー内の途中にある一部コンテンツのみの固定が可能です。
さらに固定時に横幅が広がる事もないので、上記の様に％幅の指定をする事ができます。
かなり便利ですよね。
レイアウト要素には使わない事
要素を固定する場合「col-」が設定されたレイアウト要素に対しては、重ねてsticky設定をしない様にしましょう。
レイアウト要素の中に別の要素を作り、それに対してstickyを設定するようにして下さい。
そうしないと固定されない場合があります。
<div class="col-sm-6"> //ここには設定しない <div class="sidebar"> //中に入れる <p>レイアウト要素と固定要素を分ける事</p> </div> </div>
未対応ブラウザがある
念のためですが、IE10やIE11では「position：sticky」を「position：relative」と判定します。
そのためCSSで「@supportクエリ」で囲むなどして、レンダリング可能なブラウザのみに適用を制限する必要があります。
flexboxで固定サイドバーを付ける方法
最後はflexboxレイアウトを使ったWEBサイトで固定サイドバーを実装したサンプルです。
サンプル
実装の仕方
これも一つ前のサンプル同様、position:stickyを使ったものになります。
レイアウト構成にrow colではなく、display: flexを使っているだけですね。
注意：floatシステムでは動かない
position:stickyはfloatで左右のレイアウトを構成している場合には使う事ができませんので注意が必要です。
