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

这只是因为您已经在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))
    }
  }
})

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

2 个答案: