13

TwitterBootstrapAffixプラグインを使用している要素があります。ウィンドウがアイテムの高さよりも小さくなるまで垂直方向にサイズ変更された場合、ウィンドウにすべてを表示できないため、要素から接辞機能を削除したいと思います。

これまで、コンソールでこれを削除できるかどうかを確認するために試しましたが、機能していないようです。

$("#myElement")
  .removeClass("affix affix-top affix-bottom")
  .removeData("affix");

$(window)
  .off("scroll.affix.data-api, click.affix.data-api");

多分私はこれについて間違った方法で行っているのですか？すでに適用されている要素からプログラムで接辞を削除するにはどうすればよいですか？

4

5 に答える 5

18

@MarcinSkórzewskiが提案したものと同様に、私は主にCSSソリューションを選択することになりました。

これは、ウィンドウの高さが要素の高さよりも短い場合に、新しいクラスを追加するだけです。

var sizeTimer;
$(window).on("resize", function() {
    clearTimeout(sizeTimer);
    sizeTimer = setTimeout(function() {
        var isWindowTallEnough = $overviewContainer.height() + 20 < $(window).height();

        if (isWindowTallEnough) {
            $overviewContainer.removeClass("affix-force-top");
        } else {
            $overviewContainer.addClass("affix-force-top");
        }

    }, 300);
});

そしてCSSでは、このクラスが追加されます。

.affix-force-top{
    position:absolute !important;
    top:auto !important;
    bottom:auto !important;
}

編集

ブートストラップ3の場合、これは効果的であるようです。

$(window).off('.affix');
$("#my-element")
    .removeClass("affix affix-top affix-bottom")
    .removeData("bs.affix");
于 2013-03-12T21:43:38.807 に答える
9

非推奨：回答はTwitterBootstrapv2を指します。現在のバージョンはv4です。

試すオプションはいくつかあります。

  1. の関数を使用しますdata-offset-top。通常、要素を固定するためにスクロールされたピクセルの数として整数値を使用します。ドキュメントによると、オフセットを動的に計算するJS関数を使用できます。この場合、選択した条件に応じて異なる数値を返すように関数を作成できます。
  2. メディアクエリを使用して、小さなウィンドウ（たとえば、高さ200px以下）の接辞CSSルールをオーバーライドします。

私は、2番目のバリアントがあなたに適しているはずだと思います。何かのようなもの：

@media (max-height: 200px) {
  .affix {
    position: static;
  }
}

あなたがあなたの問題にjsfiddleを提供するなら、他の人は理論的な提案をするのではなく、実際にそれを解決しようとするかもしれません、それはうまくいくかもしれませんし、うまくいかないかもしれません。

PS。Bootstrapのナビゲーションバーコンポーネントは、最大幅のメディアクエリを使用して、小さなデバイスの固定スタイルを無効にします。ナビゲーションバーの画面サイズが小さすぎるという理由だけでなく、モバイルデバイスではposition: fixed;CSSが非常に見苦しく機能するため、これを行うのは良いことです。ファイルnavbarの内部を見てください。bootstrap-responsive.css

于 2013-03-12T20:48:21.043 に答える
7

@fat $(window).off（bootstrap-affix.jsの作成者）によると、次のようにプラグインを無効にすることができます。

$(window).off('.affix');

これにより、接辞プラグインが無効になります。

参照：https ：//github.com/twitter/bootstrap/issues/5870

于 2013-06-06T04:41:08.367 に答える
3

ブートストラップの1890行目は、デフォルトのアクションを防止する必要があるかどうかの条件です。これにより、イベントをリッスンし、何らかの条件が満たされた場合に、接辞が発生しないようにすることができます。

ブートストラップからの1890行目：if（e.isDefaultPrevented（））return

例： 

$('someselector')
.affix()
.on(
    'affix.bs.affix affix-top.bs.affix affix-bottom.bs.affix'
    , function(evt){  
        if(/* some condition */){  
            evt.preventDefault();  
        }  
    }
);
于 2014-05-06T16:52:45.483 に答える
1

これは答えられましたが、誰かが私のような状況に遭遇した場合に備えて、私はこれに対する私の解決策を提供したかっただけです。

オフセットトップオプションを、スクロールされないばかげた数値に変更しました。これで、$（window）.off（'。affix'）;を実行する必要がなくなりました。すべての接辞を無効にします。

$('#element-id').data('bs.affix').options.offset.top = 1000000000;
于 2016-12-19T20:35:00.130 に答える