Проблема с bootstrap affix на странице reload

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, так как заголовок фиксирован и имеют высоту ~ 100px >>.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() 
      } 
     }); 
    });