使用数据属性的引导词缀仅适用于页面重新加载答案

【问题标题】：Bootstrap affix using data-attributes only works on page reload使用数据属性的引导词缀仅适用于页面重新加载
【发布时间】：2015-11-27 03:36:12
【问题描述】：

我正在开发一个 Rails4 应用程序，通过数据属性使用引导附加功能。

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

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

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

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

【问题讨论】：

这可能是由于 Turbolinks：这个 GEM 可以帮助jquery.turbolinks

标签： javascript twitter-bootstrap ruby-on-rails-4 twitter-bootstrap-3 turbolinks

【解决方案1】：

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

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

（请原谅我的咖啡脚本！）

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

【讨论】：

【解决方案2】：

我认为您需要在 CSS 中为 .affix 元素设置 top 属性。负边距可能会导致词缀偏移量计算出现问题 -

.affix{
   top: 300px; /* Set the top position of pinned element */
}

检查这个网址，可能对你有帮助 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-affix.php

【讨论】：

【解决方案3】：

我刚刚删除了 turbolinks 来完成这项工作。找不到使用 Turbolinks 的方法。

【讨论】：