大家好,我只使用 CSS 和 HTML 制作视差效果。我正在为桌面测试它,它适用于:Chrome、Firefox、IE 和 Spartan。
但我在移动测试中遇到了困难。目前来 self 的 Nexus 5:
Firefox:有效; Chrome:不工作;
它在 iOS 版 Chrome 上运行(目前仅在 ipad mini 上测试过)
这是版本中的错误吗?或者我遗漏了什么?
这是一个实时预览:
这里是我提取出来的一个js文件供大家测试:
<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 Mobile
最佳答案
删除 position:fixed 然后试试这个: https://jsfiddle.net/aatpa7qd/4/
$('body').scroll(function(){
$("#title").css({"background-position":"center " +($('body').scrollTop()*0.65) + "px"});
});
关于javascript - 视差效果在某些浏览器中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30541990/