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

Question

我正在通过数据属性使用bootstrap附加功能处理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;
}

当我重新加载页面时，一切都很完美，但是当我最初从我的Web应用程序上的另一个页面导航到它时它不起作用。

似乎其他人在这方面遇到了麻烦，这是一个涡轮问题。尝试了他们所有的方法，但没有奏效： 尝试使用jquery-turbolinks没什么 所以我最后一起去除了turbolinks ..如果有人知道我能做到的话，我宁愿使用turbolinks。 关于为什么会发生这种情况的任何想法？

Answer 1

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

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

（原谅我的coffeescript！）

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

Answer 2

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

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

检查此网址，可能会对您有所帮助 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-affix.php

Answer 3

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