Bootstrap 3 - affix не меняет классы

Question

У меня есть кнопка, которая открывает модальную. Эта кнопка всегда должна быть видимой. Если пользователь прокручивает страницу вниз, кнопка должна быть прикреплена сверху.

Я использую самозагрузки v3.1.1 и affix.js загружается в голове и прикрепляет «проставляет-топ» класса моей кнопки, как это должно быть.

Но когда я прокручиваю - я попробовал несколько вариантов implmentation - аффикс-топ класс не меняется на наклеить.

Вот мой код.

HTML:

<button class="btn btn-primary m-t-10 m-b-10" 
      id="standard-questions-button" 
      type="button" 
      data-toggle="modal" 
      data-target="#standard-questions-modal"> 
     Show Questions 
    </button> 

JS:

$('#standard-questions-button').affix({ 
    offset: {top: $('#standard-questions-button').position().top} 
}); 

// for testing only 
$('#standard-questions-button').on('affix.bs.affix', function() { 
    alert('affix'); 
}) 

CSS:

#standard-questions-button.affix-top { 
    color: red; 
    position: static; 
    margin-top:25px; 
    width:228px; 
} 

#standard-questions-button.affix { 
    color: green; 
    top:25px; 
    float: right; 
    width:228px; 
} 

---

подход 2 (также не работает: завернутые в функции)

$('#standard-questions-button').affix({ 
     offset: {top: function(){return $('#standard-questions-button').position().top}} 
    }); 

• Как я могу это решить?
• Я что-то пропустил?

Answer 1

У меня была точно такая же проблема. Возможно, у вас есть аналогичная проблема.

В начальной загрузке сценария (я использую версию 2.3.2) есть фрагмент кода, который назначает обработчик события прокрутки окна:

 this.$window = $(window) 
    .on('scroll.affix.data-api', $.proxy(this.checkPosition, this)) 

я понял, что в моем коде событие прокрутки не было уволен и поэтому класс не менялся. Когда я изменил только этот фрагмент на:

 this.$window = $('#main_container') 
    .on('scroll.affix.data-api', $.proxy(this.checkPosition, this)) 

Наконец-то он начал работать. Просто проверьте, каков элемент, который вы прокручиваете на своей веб-странице, и установите его в определении функции загрузки приложения Bootstrap.

Вы можете найти полезным, чтобы это проверить, если вы можете прокручивать окно:

$(window).scroll(function() { 
     alert("scroll"); 
    });