在頁面重新加載引導詞綴問題

Question

我試圖使用引導詞綴來修復我的過濾器在左側。下面是相同的HTML標記。

<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需要，因爲頭是固定的，並具有〜100像素的高度>>.affix {top: 100px}

下面是JS代碼段用來初始化綴：

//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()); 

這段代碼一切正常，直到我在頁面中間點擊頁面刷新按鈕，這會導致以下重疊。

此外，這種情況是間歇性的，並不總是（很奇怪）。當$('#filters').offset().top的值計算爲〜160px而不是通常的860px時，會發生這種情況。有人可以幫我解決這個問題嗎？

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() 
      } 
     }); 
    });