javascript – Bootstrap词缀在导航时不起作用

2023年5月3日 203次阅读

我使用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;
  }

最佳答案 我认为我遇到的问题是由于顶部和底部偏移值之间的不匹配,导致词缀插件不知道它应该处于什么状态.它可能是词缀插件中的错误或如何应用(在
https://github.com/twbs/bootstrap/issues/4647阅读更多内容).它似乎在不同的浏览器中有所不同.

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

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

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

点赞