javascript - Bootstrap 3 - 词缀不改变类

Question

我有一个打开模式的按钮。此按钮应始终可见。如果用户向下滚动页面，则该按钮应“固定”在顶部。

我使用 Bootstrap v3.1.1 和 affix.js加载在头部，并按应有的方式将 "affix-top" 类附加到我的按钮。

但是当我滚动时 - 我尝试了几种实现方式 - affix-top 类没有更改为 affix。

这是我的代码。

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

我遇到了完全相同的问题。也许你也有类似的问题。

在 Bootstrap 脚本中(我使用的是 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 的 Affix 函数定义中。

您可能会发现这有助于检查您是否能够滚动窗口:

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