视差滚动在Internet Explorer 11和Safari中

Question

我有一个像网站的滚动效果的视差解决方案，但不知何故，它在Safari 9.0.1（Mac）和Internet Explorer 11（Windows 7）中表现得不稳定。

我的解决方案使用jQuery 1.11，并通过使用jQuery＆＃39; background-position方法调整div的.css()。这应该具有固定背景图像的视觉效果，可以滚动。

以下是我的问题的简化演示：https://jsfiddle.net/Lypnb63c/1/

更确切地说，问题似乎与函数dontScrollBackground()有关。

我发现的一件奇怪的事情是，一旦我删除了position:fixed的div，大多数浏览器都会变得更加不稳定。

这是一个带有position:fixed的div元素的演示：https://jsfiddle.net/Lypnb63c/1/

问题：

1. 有没有人知道我的解决方案是否存在浏览器特定问题？
2. 是否有一种简单的方法可以在所有主流浏览器中使用它？

一个解决方案可能是纯css的使用，但我想首先尝试使用我当前的解决方案。

我会感谢任何帮助。

Answer 1

我自己解决了这个问题。问题是第12行$(this).css("background-position", "52% " + (st - y) + "px");。

我发现通过在表示背景的元素中添加以下样式可以达到相同的效果：background-attachment: fixed。因此，我的问题的解决方案是将上面提到的第12行更改为$(this).css("background-attachment", "fixed");

我希望我的解决方案可以帮助那些遇到类似问题的人。