ページの再読み込み時にブートストラップが付いている問題

Question

私は、左側に自分のフィルタを固定するためにブートストラップ接辞を使用しようとしています。以下は同じもののHTMLマークアップです。

//To fix the filter-form pn page scroll 
$('#filterAffix').affix({ 
    offset: { 
     top: $('#filters').offset().top - $('nav.navbar').outerHeight(true) 
    } 
}); 

//To fix the width of filter affix, preventing width issues that many encounter 
$('#filterAffix').width($('#filterAffix').width()); 

：ヘッダが固定され、JSは接辞を初期化するために使用スニペットされ〜100ピクセルの高さ>>以下 .affix {top: 100px}

を持っているので

<div class="row"> 
    <div class="col-md-3 col-sm-3 col-lg-2" id="filters"> 
    <div id="filterAffix"> 
     <h2 class="text-center">Refine Products!</h2> 
     <hr> 
     FILTERS HERE.... 
    </div> 
    </div> 
    <div class="col-md-9 col-sm-9 col-lg-10"> 
    <div id="product-listings"> 
    </div> 
    </div> 
</div> 

これはCSSは、必要とされます

ページの途中でページをリフレッシュするボタンが表示されるまで、すべてのコードがこのコードで期待通りに機能し、重複が発生します。

また、これは断続的に発生するものであり、必ずしもそうではありません。これは、$('#filters').offset().topの値が通常の860pxの代わりに〜160pxとして計算される場合に発生します。誰かが私にこれを解決するのを助けることができる？

Answer 1

画像がロードされていないために問題が見つかりました。 #filters要素はdom構造のイメージの後にあります。場合によっては、画像がロードされる前にオフセットトップが計算されることがあるので、画像がロードされた後でなければアタックスプラグインを初期化する必要はありません。

$('.carousel-inner img').on('load', function() { 
     // Initialize the affix plugin only once this image has loaded, else it will lead to issues as $('#filters').offset().top will be calculated incorrectly 
     $('#filterAffix').affix({ 
      offset: { 
       top: $('#filters').offset().top - $('nav.navbar').height() 
      } 
     }); 
    });