Bootstrap 3を使ってウェブサイトをつくっている。左のメニューバーを固定するaffixが使いたかったけどうまくいかない。Bootstrap 3での説明は日本語では見当たらない。ときて、困っていた。
スクロールしてもずっとついてきてくれるこの赤い囲いところがaffix
基本的には2.1のときと同じ方法で指定すればいいことがわかったので、備忘録的に書いておく。
改変個所
いくつか手直しをしないといけない箇所があった。
オリジナル
<script type="text/javascript">
$('#myAffix').affix({
</script>
$('#myAffix').affix({
offset: {
top: 100
, bottom: function () {
return (this.bottom = $('.bs-footer').outerHeight(true))
}
}
})
改変
<script type="text/javascript">
$(function(){
$('.affix').affix({
}
});
});
</script>
$(function(){
$('.affix').affix({
}
});
});
</script>
なぜか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;">
なぜかメニューのdivの幅が文字列の幅に合わせられてしまうので、無理やりstyleにmin-widthを入れて、これ以上細くなるなよ、と設定した。なぜこうなるかは謎。
重要
<div style="background-color:#fff;">
以上で出来上がり！ めんどう！
できたページは以下の通り。
Gogax（ゴガックス）【語学習得支援サイト】
