Question

我有以下代码，在滚动时添加类“sticky”，并在元素到达锚点“#search-anchor”时删除类“sticky”。

但是，我无法向下滚动以查看完整的页脚。有什么想法吗？

transform

Answer 1

如果你使用指令debugger来暂停在控制台中执行JavaScript，你就会得到@ mike-mccaughan正在解释的内容。

由于CSS .inline-search，您脚本会从文档流中添加和删除元素position:fixed;。

如果向下滚动并将.inline-search重新添加到文档流程中，文档高度会再次更改，滚动条会有一些空格，因此您的代码会检测我们是否位于页面底部再工作了。会发生什么是添加和重新添加固定位置的无限且非常快速的循环：因此，似乎页面在到达页脚之前“停止”滚动。

为了创建这样的效果（在滚动时固定定位），我建议使用Bootstrap的affix jQuery插件。更进一步：Bootstrap最近宣布他们正在放弃Affix，因为CSS的粘性定位，所以这里真正的“面向未来”的建议是使用polyfill的粘性定位，以允许旧版浏览器具有相同的效果。