Question

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

但是我在移动测试中遇到了问题。目前来自我的关系5：

Firefox：有效; Chrome：不工作;

它适用于iOS版Chrome（目前仅在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手机上工作

Answer 1

删除位置：已修复并尝试此操作： https://jsfiddle.net/aatpa7qd/4/

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

视差效果在某些浏览器中无效

1 个答案: