2

我正在尝试使用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%;}

这是我在 jsfiddle 上的示例

问题的原因可能是什么？

升级版：

删除背景重复后的示例：无重复jsfiddle 链接

4

2 回答 2

2

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

$.stellar({ Horizo​​ntalScrolling: false, responsive: true, verticalOffset: 0 });

于 2016-08-15T23:28:42.977 回答
0

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

$.stellar({responsive:true})

这是新jsfiddle的链接

于 2013-10-11T13:24:54.457 回答