Question

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

到目前为止这是有效的：

但显然parallex效果使浏览器能够计算到目前为止用户已滚动到哪一点 - 如果您关注导航栏。导航系统既不固定在屏幕顶部，也不显示徽标，导航链接也不起作用。

$( document ).scrollTop();

所以这部分的值总是保持为0。

是否有任何解决方案或解决此问题？

到目前为止，使用js的视差效果并不适合我，因为我发现的大部分插件都只是改变了背景图像的滚动速度。

我注意到的另一个问题是效果在Chrome和Firefox中运行良好但在Safari中根本不适用？

非常感谢你的帮助。

Answer 1

修改

我看到你在第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（））中添加滚动位置以补偿滚动偏移量

不要忘记您可以使用css position：fixed
将底部菜单固定在屏幕底部
document.scrollTop（）返回零的原因是因为滚动不会发生在文档正文中，而是发生在.parallax容器中（滚动条位于该容器中）。身体没有任何垂直溢出（视差div是100％高度（100vh）），因此身体不会发生滚动。但是你的js插件在点击时平滑滚动（scrollit.js）会尝试滚动到正文，这就是为什么它不会与你的视差div一起工作。

在初始化脚本时，如果可以指定备用容器而不是正文，请参阅scrollit.js文档。否则，尝试将其用于.parallax的css规则应用于正文（并相应地更改html结构）

应该有固定位置的元素（例如'nav ul'）应该有position：fixed而不是position：absolute
祝你好运

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

1 个答案: