Bootstrapでサイドブロック固定を行う場合は「Affix」ではなくjQueryプラグインを利用した方がいい

Bootstrapでは簡単にメニューブロックなどの固定を行うことができるJavascript「Affix」がついてます。
なのでエレベーター式の右ブロック固定をするときにこちらを利用しようと思ったんですが、色々と問題が発生してしまいました。

スクロールすると幅が広がる
なので幅サイズの指定が必要になるんですが、そうすると次はレスポンシブでの対応が大変
固定開始と、固定解除がうまくいかない

なので「Affix」を利用するのはやめて別のjQueryプラグインを利用することにしました。

おすすめなのがjQuery Ex Flex FixedAdd Starkadoppeというプラグインです。
こちらのサイトで配布してくださっています。

サイドメニューなどを一定の範囲でのみ position:fixed させる jQuery Ex Flex Fixed

利用方法

head内で読み込む

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.exflexfixed-0.3.0.js"></script> //ダウンロードしたjQueryプラグインのファイル

JavaScript

<script>
jQuery(function(){
  $('.nav-list').exFlexFixed({ //固定する要素を指定
    container : '#contents-body',  //固定する要素を囲むブロックを指定
        fixedHeader : '#header', //オプション。ヘッダーなどの固定要素がある場合はこちらに指定
  });
});
</script>

CSS

/*固定する要素を囲むブロックを指定*/
#contents-body{
  /zoom : 1;
}
#contents-body:after{
  content : '';
  display : block;
  clear : both;
}
/*メニューを指定*/
.side{
  position : relative;
  z-index:1;
}