使用数据属性的引导粘贴仅适用于页面重新加载

Bootstrap affix using data-attributes only works on page reload

本文关键字：新加载 加载 适用于 数据属性      更新时间：2023-09-26

我正在开发一个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涡轮链接什么都没有所以我最终把涡轮连杆全部拆了。。如果有人知道我可以做到的话，我宁愿使用涡轮链接。你知道为什么会发生这种情况吗？

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

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

（对不起，我的咖啡脚本！）

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

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

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

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

我刚刚删除了涡轮链接以使其工作。无法找到使用Turbolinks进行此操作的方法。

相关文章：