affix -bottom类不适用于twitter bootstrap affix插件

Question

我尝试了许多使用data-attribute和Javascript语法的语法，以便在向下滚动时为附加的对象设置.affix-bottom类，但它不起作用。当我检查附加的元素时，当我通过向下滚动到达页面底部时，.affix类不会更改为.affix-bottom。

我已经尝试了很多代码片段，包括官方文档中提供的代码片段：

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

====

$('#my-affix').affix({
  offset: {
    top: 100
    , bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

我错过了什么吗？

先谢谢你。

Answer 1

你的div应该是这样的

<div id="my-affix">

因为您引用的是jQuery中的div id。affix js也没有为我监听html数据元素，但这应该可以工作！

Answer 2

这很简单，因为您已经在HTML标记中直接设置了data-offset-bottom="200"。

因为您没有在您的HTML标记中设置id，所以您的jQuery选择器不可能获得该元素。

要使其生效: 1.将id添加到您的元素中2.如果要动态计算底部，则删除data-offset-top和data-offset-bottom。

所以结果应该是这样的：

<div id="my-affix" data-spy="affix">
  ...
</div>
 ...
<div class="footer></div>
====

$('#my-affix').affix({
  offset: {
    top: 100
    , bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})