0

これは私のhtmlコードです:

<div class="masthead">
    <img class="img-responsive" data-src="holder.js/990x150/auto" alt="Generic placeholder image">
</div>
<!-- /container -->
<div id="menu-gora" class="navbar navbar-inverse  affix-top">

Img はレスポンシブ要素です。私のラップトップでは 150 px です。私がしようとすると：

$(document).ready(function(){
        $('#menu-gora').affix({
          offset: {
            top: 150
          }
        });
    });

それは正常に動作します。しかし、それは動作しません:

top: $('.masthead img').height()

30pxを過ぎると「貼り付け」を開始します。いつも。レスポンシブである必要があり、何が間違っているのかわかりません:/

で値を読み取るとconsole.log($('.masthead img').height())、正しい値が表示されます。何が問題ですか？

4

1 に答える 1

2

ブートストラップのドキュメントによると、動的な高さを持つ「適切な」方法は、次のように関数で値を返すことです

$('#menu-gora').affix({
    offset: {
        top: function () {
            return (this.top = $('.masthead img').height());
       }
    }
});

でも！これは動的なサイズのコンテンツを考慮していないため、たとえば、カルーセルやアコーディオンで固定要素がある場所の高さを変更するものがある場合は、新しい高さを再計算する必要があります。私の知る限り、オフセット番号を動的に変更する方法はありません。今私がやっていることは、サイズが変わるたびに接辞を再適用することです（添付メニューの上に不明な量の折りたたみがあります）。

于 2014-03-10T14:47:02.223 に答える