2013年12月1日日曜日

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(ゴガックス)【語学習得支援サイト】

参照リンク

0 件のコメント:

コメントを投稿