Jquery 使用纯CSS视差和计算视口的问题

我试图在下一页中使用Keith Clarks纯CSS视差：

到目前为止，这是有效的：

但显然，平行效果使浏览器能够计算用户到目前为止滚动到的点——如果你注意导航栏的话。导航既不固定在屏幕顶部，也不显示徽标，导航链接也不工作

$( document ).scrollTop(); 

所以这部分的值始终保持为0

对于这个问题有什么解决方案或解决方法吗

到目前为止，在js中使用视差效果对我来说并不管用，因为我发现的大多数插件只处理改变背景图像的滚动速度

我注意到的另一个问题是，这些效果在Chrome和Firefox中运行良好，但在Safari中却完全不起作用

非常感谢您的帮助。

编辑：

我看到您在第43行编辑了scrollit.js；您将$（'html，body'）更改为$（'html，.parallax'）。但您最好只将其更改为$（'.parallax'），因为我们不设置主文档的动画

解决当前问题的方法是将第42行替换为：

var targetTop = $('[data-scroll-index=' + ndx + ']').offset().top + settings.topOffset.val + 1 + $('.parallax').scrollTop();

因此，在最后，在.parallax（$（'.parallax'）.scrollTop（）中添加scrollposition以补偿滚动偏移

也不要忘记，您可以使用css position:fixed将底部菜单固定到屏幕底部

---

document.scrollTop（）返回零的原因是滚动不是在文档体中发生的，而是在.parallax容器中发生的（滚动条在该容器中）。主体没有任何垂直溢出（视差div为100%高度（100vh）），因此主体中不会发生滚动。但是你的js插件（scrollit.js）试图在点击时平滑滚动到body，这就是为什么它不能和你的视差div一起工作

如果可以在初始化脚本时指定替代容器而不是主体，请参见scrollit.js文档中的。否则，请尝试在主体上应用您对.parallax的css规则（并相应地更改html结构）

应具有固定位置的元素（例如，nav ul）应具有位置：固定，而不是位置：绝对

---

祝你好运

我尝试将scrollit.js更改为.parallax容器。它可以工作，但肯定不能正常工作：只要我在页面顶部，我现在就可以使用导航。如果我不是，锚显然是以错误的方式计算的。但是，是的，我真的不明白为什么呢？我猜（因为我从未使用过它），scrollit js计算锚的位置是错误的；与主体相比，而不是与.parallax容器相比，或者相反，因此如果您不在顶部，则滚动过远或不够远。但请提供一个您现在拥有的示例。或者尝试我提到的另一个选项：使用主体作为视差父容器，而不是.parallax div。哦，对不起，我忘记了当前链接：是的，已经尝试了第二个选项，效果根本不太好，导航现在确实可以工作了。但是定位固定不起作用：显然导航必须在视差容器内——如果是，导航工作，但保持绝对并滚动。如果我把它放在集装箱外面，导航是固定的，但不再工作了。令人沮丧的。你看到解决方案了吗？问题是什么？谢谢你的帮助。如果这能解决，我会很高兴的。目前的状态仍然是