Bootstrap 3でのaffix指定方法

　ブログのテーマとは関係ないけど備忘録。

　Bootstrap 3を使ってウェブサイトをつくっている。左のメニューバーを固定するaffixが使いたかったけどうまくいかない。Bootstrap 3での説明は日本語では見当たらない。ときて、困っていた。

スクロールしてもずっとついてきてくれるこの赤い囲いところがaffix

　基本的には2.1のときと同じ方法で指定すればいいことがわかったので、備忘録的に書いておく。

改変個所

いくつか手直しをしないといけない箇所があった。

オリジナル

     <script type="text/javascript">
     $('#myAffix').affix({

    offset: {

      top: 100

    , bottom: function () {

        return (this.bottom = $('.bs-footer').outerHeight(true))

      }

 

    }

  })

 

  </script>

改変

    <script type="text/javascript">
      $(function(){
      $('.affix').affix({
    }
  });
  });
    </script>

bootstrap.jsを読みこませた上、「<script type="text/jacascript">～</script>」をaffixを入れるページのどこかに書いておく。

なぜかoffsetが効かないのでぼくは割愛。「#myAffix」という変数部分は「.affix」に書き換える。ピリオドを忘れないように。bootstrap.jsのデフォルトの設定ではaffixという名前じゃないと効かないようになっている。

オリジナル

<div data-spy="affix" data-offset-top="200">...</div>

改変

<div data-spy="affix" data-offset-top="0px" style="min-width:21%;margin-top:10px;">

効かなかったoffsetはhtmlで暫定的に記述。data-offset-topでは、どれだけスクロールしたらaffixが作動するかを設定する。ここに書いてあったからjacascriptで効かなかったのかな。

なぜかメニューのdivの幅が文字列の幅に合わせられてしまうので、無理やりstyleにmin-widthを入れて、これ以上細くなるなよ、と設定した。なぜこうなるかは謎。

重要

<div style="background-color:#fff;">

メイン（スクロールさせる方、上の画像の青い囲み）のdivに背景色を設定しないといけない。さもないと、ディスプレイ幅を細くした場合、メインのdivの裏にメニュー（affixさせる方、上の画像の赤い囲み）のdivが透けて見えてしまう。bootstrap本家のページでも、背景色を#eeeに設定している。

以上で出来上がり！　めんどう！

できたページは以下の通り。

Gogax（ゴガックス）【語学習得支援サイト】

参照リンク

• Bootstrap 3
• Bootstrap 2.1「Affixプラグイン」がわかりにくかったので少し紐解いてみました