gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:04:27 26 4
gpt4 key购买 nike

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

问题的原因可能是什么?

更新:

删除背景重复后的示例:无重复 jsfiddle link

最佳答案

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

$.恒星({ 水平滚动:假, 回应:真实, 垂直偏移量:0 });

关于html - stellar.js 的视差效果 - 调整大小后出现空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19281091/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com