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

【问题标题】：The .affix-bottom class doesn't work for the twitter bootstrap affix plugin.affix-bottom 类不适用于 twitter 引导词缀插件
【发布时间】：2014-03-31 19:58:44
【问题描述】：

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

我已经尝试了很多sn-ps，包括官方文档中提供的那些：

<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))
    }
  }
})

我错过了什么吗？

先谢谢了。

【问题讨论】：

您能否也发布您的 HTML 标记 - 或创建一个 Bootply？

标签： twitter-bootstrap affix

【解决方案1】：

你的 div 应该是这样的

<div id="my-affix">

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

【讨论】：

【解决方案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))
    }
  }
})

【讨论】：