导航后附加功能无效

Question

我使用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找到示例代码。如果滚动到页面底部，单击“转到其他位置”，然后单击后退按钮，则会出现错误。暴力上下滚动也会打破它。

修改 使用绝对定位向css添加.affix-bottom类可以通过某种方式来修复它。至少现在当它“被打破”时，div只是坚持其滚动范围的底部。当我向后滚动到顶部时，它会再次恢复正确的固定位置。但它仍然不是我称之为稳定的。

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

Answer 1

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

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

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

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

Answer 2

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