导航返回时引导词缀不起作用答案

【问题标题】：Bootstrap affix does not work when navigating back导航返回时引导词缀不起作用
【发布时间】：2014-07-26 10:11:50
【问题描述】：

我使用 Bootstrap 词缀创建了一个固定位置 div，其行为类似于您在 Stackoverflow 中提出新问题时出现的“如何格式化”和“类似问题”div。当我第一次加载页面时它工作正常，但是如果我向下滚动页面很远，导航离开，然后使用后退按钮返回页面，附加的 div 有时会被附加到错误的位置，有时固定位置会中断，它会简单地返回到文档中的正常位置。

我执行词缀的方式有问题吗？

文档布局（#engage 是附加的 div）。它不应该滚动到#title 或#footer：

Javascript

$('#engage').affix({
    offset: {
        top: $('#donation-content').offset().top,
        bottom: function () {
            return (this.bottom = $('.footer').outerHeight(true))
        }
    }
});

CSS

#engage.affix {
    position: fixed;
    top: 0;
}

@media(max-width:767px){

   #engage.affix {
    position: static;
    }
}

您可以在http://www.bootply.com/pxyz1hsefA 找到示例代码。如果您滚动到页面底部，单击“转到其他地方”，然后单击返回按钮，则往往会发生错误。暴力的上下滚动也会破坏它。

编辑： 将.affix-bottom 类添加到具有绝对定位的css 可以通过某种方式修复它。至少现在当它“损坏”时，div 只是停留在其滚动范围的底部。当我滚动回顶部时，它会再次恢复到正确的固定位置。但它仍然不是我所说的稳定。

#engage.affix-bottom {
  position: absolute;
  }

【问题讨论】：

这个浏览器/平台是特定的吗？刚刚在 OSX 上快速尝试了 Chrome 和 Firefox，我看不到所描述的问题……

标签： javascript jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我认为我遇到的问题是由于顶部和底部偏移值之间的不匹配，导致词缀插件不知道它应该处于什么状态。这可能是词缀插件中的错误或它如何已应用（在https://github.com/twbs/bootstrap/issues/4647 阅读更多内容）。它在不同浏览器中的表现似乎也不同。

在我的情况下，我只能通过删除底部偏移来解决它：

$('#engage').affix({
    offset: {
        top: $('#donation-content').offset().top
        }
});

这确实意味着固定的 div 在某些情况下可以与页脚重叠，这并不理想但更稳定。我暂时将此标记为已接受的答案，因为它确实解决了问题，尽管它确实留下了不幸的副作用。

【讨论】：

抱歉迟到了，只是一个小旁注；虽然这解决了我的问题，但代码中出现了一个额外的右括号。只是认为这将是一个很好的提醒，以供将来参考。 +1
感谢@DaveWoodhall，我已将其删除。

【解决方案2】：

添加一个微小的超时解决了我的问题。删除其中一个偏移设置（顶部或底部）也有帮助，但对我来说不是一个选项。

【讨论】：