Question

我有一个打开模态的按钮。此按钮应始终可见。如果用户向下滚动页面，则该按钮应该被贴上＆＃34;在顶部。

我使用bootstrap v3.1.1并且affix.js被加载到头部并且将＆＃34; affix-top＆＃34; 类附加到我的按钮上。

但是当我滚动时 - 我已经尝试了几种implmentation的变种 - 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");
    });

Bootstrap 3 - 词缀不会改变类

1 个答案: