スキップしてメイン コンテンツに移動

投稿

3月, 2014の投稿を表示しています

Bootstrap3のAffixバグについて

【Affixとは】


サイドメニューなどを、画面と一緒にスクロールさせずに固定位置で表示するためのBootstrapのビルトイン便利JSです。
http://getbootstrap.com/javascript/#affix

また、サイドメニューの上部高さとフッターの高さを指定すると、上部高さまで、および、フッターが表示されるとフッターに押されて画面と一緒にスクロールされます。

上部高さはoffsetオプションのtopで指定し、フッターの高さはoffsetオプションのbottomで指定します。
具体例は以下

$('サイドメニュー').affix({   offset: {     top: function () {       return (this.top = $('ヘッダー部分').outerHeight(true))     },     bottom: function () {       return (this.bottom = $('フッター部分').outerHeight(true))     }   } });

【バグの事象】(v3.1.1で確認) スクロール中は動的にJSにより.affixクラスが付与され、position:fixed(自分でCSSに設定)となりサイドメニューの位置は固定され、bottom(フッター位置)までスクロールすると、動的にJSにより.affix-bottomクラスが付与され、position:absolude(自分でCSSに設定。top位置はJSが計算)となり画面と一緒に上に移動してゆきますが、スクロールで上部に切り返しても.affix-bottomが解除されず位置がフッターの上部に固定されたままになってしまいます。
(一旦、画面上部までスクロールすると.affix-topが付与され、サイドメニューは初期位置までジャンプします。その後画面下部にスクロールすると.affixが付与され正常動作(位置固定)しますが、bottomまでスクロールされると上記不具合(.affix-bottomクラスが付与され解除されない)が発生します。)


【バグの報告】 以下でバグ報告が挙げられています。
https://github.com/twbs/bootstrap/is…