stellar.js 的视差效果 - 调整大小后出现空白答案

【问题标题】：Parallax effect with stellar.js - whitespace appears after resizingstellar.js 的视差效果 - 调整大小后出现空白
【发布时间】：2016-08-16 07:28:42
【问题描述】：

我正在尝试使用stellar.js 插件在一个页面网站上实现视差效果。我想要的是每张幻灯片都有 100% 的高度。当我加载页面时，一切正常，但是如果我调整浏览器的大小，在带有图像背景的幻灯片之后会出现奇怪的白色区域。

这是我的标记。只有 page3 应该有视差效果。

<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-repeat jsfiddle link

【问题讨论】：

尝试删除 background-repeat: no-repeat;对于#page3
@Kishore 我尝试删除“不重复”属性，现在调整大小后，您可以看到图像在 y 坐标中重复。它看起来不太好。我相信像 data-stellar-background-ratio、data-stellar-vertical-offset 这样的恒星配置存在一些问题......

标签： html css parallax

【解决方案1】：

我知道这是一篇旧文章，但我想我会发布我的解决方案，以防它帮助其他人...我能够通过将 HorizontalScrolling 属性设置为 false、响应属性设置为 true 以及设置verticalOffset 属性为 0：

$.stellar({ 水平滚动：假，响应式：真实，垂直偏移：0 });

【讨论】：

这对我有用。尝试了所有其他建议，但似乎 responsive:true 参数是我的实际解决方案。

【解决方案2】：

我解决了这个问题。如果将“响应”属性设置为 true，则调整大小后将没有空格：

$.stellar({responsive:true})

这是指向新jsfiddle的链接

【讨论】：