twitter-bootstrap - .affix-bottom 类不适用于 twitter 引导词缀插件

Question

我尝试了许多带有数据属性和 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。词缀 js 也没有为我监听 html 数据元素，但这应该可以工作！

Answer 2

这仅仅是因为您data-offset-bottom="200"已经直接在 HTML 标记中进行了设置。

由于您没有在 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))
    }
  }
})