视差效果在某些浏览器中不起作用答案

【问题标题】：Parallax effect not working in some browsers视差效果在某些浏览器中不起作用
【发布时间】：2018-02-02 14:03:51
【问题描述】：

大家好，我只使用 CSS 和 HTML 来制作这种视差效果。我正在为桌面测试它，它适用于：Chrome、Firefox、IE 和 Spartan。

但我在移动测试中遇到了困难。目前来自我的nexus 5：

Firefox：有效；铬：不工作；

它在 Chrome for iOS 上运行（目前仅在 ipad mini 上测试）

这是版本中的错误吗？还是我错过了什么？

这是一个实时预览：

live demo

这是我提取的一个js文件供大家测试：

jsfiddle demo

<div id="title" class="slide header"></div>
<div class="slide"></div>

.slide {
   position: relative;
   min-height: 100vh;
   width: 100vw;
}

#title {
   background-image: url("http://i.imgur.com/LzOCzLr.jpg");
   background-attachment: fixed;  
}

更新：仅适用于 Android 的 Chrome 移动版

【问题讨论】：

无论如何，这将如何在 FireFox 中产生视差效果？这只是一个固定的效果。这似乎在我的 Chrome 上运行良好。（Linux，v43）。 编辑：哎呀，没看到你在移动设备上测试。
固定背景是一项非常耗费 GPU 的任务，因此并非所有移动浏览器都支持它们。甚至桌面版 Firefox 在 Linux 发行版上的一些固定图像背景实现也疯狂地滞后。
除此之外还有其他解决方案吗？喜欢使用一些 JavaScript 库而不是像我那样使用纯 HTML css？
这是一个很好的视差示例：codepen.io/keithclark/pen/JycFw
你好，这是我以前做代码的同一个例子，如果你注意到它几乎是一样的。

标签： javascript html css parallax

【解决方案1】：

删除 position:fixed 并尝试以下操作： https://jsfiddle.net/aatpa7qd/4/

$('body').scroll(function(){
  $("#title").css({"background-position":"center " +($('body').scrollTop()*0.65) + "px"});
});

【讨论】：

整个轻微的视差效果消失了，所以这不起作用：/
您在寻找固定的背景吗？如果是这样，您可以从代码中删除 * 0.65。