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

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/issues/9342
https://github.com/twbs/bootstrap/issues/12736


【修正されたaffix.js】

以下からダウンロード可能です。（2014.3.26現在）
https://github.com/twbs/bootstrap/blob/master/js/affix.js


【主な修正点】

＜NG＞
    if (affix == 'bottom') {

      this.$element.offset({ top: scrollHeight - offsetBottom - this.$element.height() })

    }

＜OK＞
    if (affix == 'bottom') {

      this.$element.offset({ top: position.top })

    }

NGは、スクロール高さ（=サイト全体の高さ）からオプションで指定したbottomの高さとサイドメニュー自身の高さを引いた位置をtopの位置としていましたが、サイドメニューの高さや、フッターの高さに影響され不具合が発生する場合があります。
OKは、単純に自身の位置をサイドメニューのtopの位置に変更されています。

以上です。


Bootstrapはとても便利で今やRWDのサイト制作には欠かせないフレームワークですが、Bootstrap自体にバグがあるとにっちもさっちもゆかなくなります。（自分のコードに問題がなくても事象が解決されないので何時間も悩んでしまいます。）

それでもいちからRWDを自前で制作しようとすると
・幅pxを%に計算すると...
・このJS使いたいけどレスポンシブ対応してるかしら...
・こんな共通クラスあったら便利だからまず作っておいて...
・わー、このサイトもう自分しか解読できないな...
みたいなことで悩む時間をBootstrapが解決してくれますから断然Bootstrapの使用をオススメします。

ラベル:

コメント

コメントを投稿

このブログの人気の投稿

iframeに異なるドメイン（クロスドメイン）のコンテンツを読み込んで高さを自動調節する方法

趣旨 iframe（親）に異なるドメインのページ（子）を読み込んで、親フレームにスクロールが出ないよう、iframeの高さを子ページの高さに自動調節する 方法 普通にやると、 「Uncaught SecurityError: Blocked a frame with origin "http://hoge.com" from accessing a frame with origin "http://fuga.com".  Protocols, domains, and ports must match. 」 などと怒られてしまいますのでこちらを参考に http://stackoverflow.com/questions/18456498/how-can-i-change-the-size-of-an-iframe-from-inside http://i556tips.tumblr.com/post/15710917018/%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A7iframe%E3%81%AE%E9%AB%98%E3%81%95%E3%82%92%E8%87%AA%E5%8B%95%E8%AA%BF%E7%AF%80%E3%81%99%E3%82%8Bjavascript コード hoge.com（親） <html> <head>     <title>親</title>     <script src="js/jquery.js"></script>     <script>         window.addEventListener('message', function(e) {         var iframe = $("#fugapage");         var eventName = e.data[0...
コメントを投稿
続きを読む

HTMLの要素を下揃えする方法

【実現したいこと】 上の図において、要素１と要素２の下面を揃えたい。 【よく見る方法は...】 ・親要素に「position:relative;」 ・子要素に「position:absolute;」、「bottom:0;」 とすると、左右のdivの高ささえ揃えておけば、下面を合わせられますが、BootstrapなどのCSSフレームワークを使用していたりして、既存のスタイルと干渉してしまう場合に、JavaScript（jQuery）で実現する方法を記載します。 【JavaScriptでの実現方法（考え方）】 上の図において、スクリプトを使用し、「A」、「B」、「C」を高さを取得し、計算により「D」の高さを取得します。 「D」=「A」-「B」-「C」 この「D」を要素２の「margin-top」に追加してあげます。 今回は、レスポンシブ（RWD）に対応するため、ウィンドウの幅を変えた時にも「margin-top」を設定し直す仕様とします。 【実装】 jQuery(document).ready(function() {   adjustPosition();     $(window).resize(function () {     adjustPosition();   });   function adjustPosition(){       var heightA = $("要素１").outerHeight();       var heightB = $("テキスト部").outerHeight();       var heightC = $("要素２").outerHeight();       var heightD = heightA - heightB - heightC;       if (heightD > 0) {         $("#要素２").css("margin-top", heightD + "px");...
コメントを投稿
続きを読む

第53回「否定的な意見を言われたら喜びましょう！？」カウンセラーの集客・仕事応援！顧客獲得型ホームページの作り方ラジオ

🔰【5ステップ無料動画講座】UCHP〜売れっ子カウンセラーホームページ構築【無料】動画講座→ https://adachiweb.support/howto-uchp-movies/ 🔸ノウハウは素晴らしくても廃業されるカウンセラーがいます。その理由を知っていますか？ なぜ？カウンセラーこそホームページをやるべきなのか！？ 実は他の業種より、カウンセラーがHPをやるべき、 たった１つの理由があります。 ￣￣￣￣￣￣￣￣ 半年前、、、 全く集客が出来なかった ダブルワークのカウンセラーさんが ￣￣￣￣￣￣￣￣￣￣￣￣￣ 集客を仕組み化し、 専業カウンセラーになった方法を、 ￣￣￣￣￣￣￣￣ 知りたくありませんか？ ⭕カウンセラーで一生食べていくWeb集客が身につくセミナー 詳しくはこちら ↓↓↓ https://counselor-shuukyaku.com/ 各回先着4名様限定で50%OFF！ ✨ストアカの早割ご利用で先着4名さらに30%OFF！ ⭕ストアカからのお申し込みはこちら ↓↓↓ https://www.street-academy.com/myclass/62748 🔸 【動画の概要】 ￣￣￣￣￣￣￣￣ ビジネスをする中で 発信をしていると、 様々な反響があります。 その中には 肯定的な意見 もあれば、 ￣￣￣￣￣￣ 否定的な意見 もあります。 ￣￣￣￣￣￣ 否定的な意見があると、 気持ちとしては 辛いものがありますが、 実は、 喜ぶべき側面 もあります。 ￣￣￣￣￣￣ 今回は、 そんな 否定的な意見の 喜ぶべき側面とは何か 、 鈴木智夫が解説します。 🔸音声で聴きたい人はこちら：Podcast（ポッドキャスト 無料インターネットラジオ）→ https://adachiweb.support/podcast-howto/ 🔸【今だけ無料でサクッと】集客はタイトルが8割！7ステップメール講座→ https://adachiweb.support/howto-title...
コメントを投稿
続きを読む