javascript - 使用数据属性的 Bootstrap 词缀仅适用于页面重新加载

Question

我正在开发一个 Rails4 应用程序，通过数据属性使用 Bootstrap 词缀功能。

我正在使用这样的数据属性:

<div data-spy="affix" data-offset-top="300" data-offset-bottom="615">
...stuff...
...stuff...
...stuff...
</div>

我唯一的词缀类 CSS 如下:

.affix {
    width: 255px;
    margin-top: -300px;
}

.affix-bottom {
    position: relative;
}

.affix-top {
    position: relative;
}

当我重新加载页面时一切正常，除了当我最初从我的网络应用程序的另一个页面导航到它时它不起作用。

似乎其他人对此有困难，这是一个 turbolinks 问题。尝试了他们所有的方法，但没有任何效果: 没有尝试使用 jquery-turbolinks 所以我最终一起删除了 turbolinks.. 如果有人知道我可以做到这一点，我宁愿使用 turbolinks 如果我能让它工作。 关于为什么会发生这种情况的任何想法？

Answer 1

我最终删除了数据属性并在页面加载后初始化词缀(我使用 jquery.turbolinks )，如下所示:

  $(document).ready ->
    $('#myAffix').affix({
      offset:
        top: 100,
        bottom: 0
    })

(请原谅我的 CoffeeScript !)

如果您需要使用数据属性设置偏移量等(即您站点上的每个词缀都有不同的偏移量)。例如，您可以创建自己的数据属性并使用 $('#myAffix').data('offset-top') 获取它们。