我试图用stellar.js插件在一个页面站点上实现视差效果。我想要的是每张幻灯片都有100%的高度。当我加载页面时，一切正常，但如果我调整浏览器大小，带有图像背景的幻灯片后会出现奇怪的白色区域。
这是我的提成。只有第3页才有视差效果。
<body>
<div id="header">Testing</div>
<div id="page1" class="page"></div>
<div id="page2" class="page"></div>
<div id="page3" class="page" data-stellar-background-ratio="0.5"></div>
<div id="page4" class="page"></div>
</body>
这里是css规则：
html,body{
height: 100%;
margin: 0;
padding: 0;
}
.page{
height: 100%;
width: 100%;
}
#page1{background-color: red;}
#page2{background-color: greenyellow;}
#page3 {
background-image:url(images/firstBG.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
}
#page4{background-color: yellow;}
#header {position: fixed; background-color: gainsboro; height: 30px; width: 100%;}
下面是我的例子on jsfiddle
问题的原因是什么？
升级版：
删除背景重复后的示例：no repeatjsfiddle link
最佳答案
我知道这是一篇老文章，但我想我会张贴我的解决方案，以防它帮助其他人。。。通过将horizontalScrolling属性设置为false，将Responsible属性设置为true，并将verticalOffset属性设置为0，我可以解决此问题：
$恒星({
水平滚动：错误，
回应：是的，
垂直偏移：0
});