0

我正在一个单页网站上工作，每个部分的背景图像视差都在另一个页面上滚动。

这是我的 HTML：

<section class="container" id="home"></section>
<section class="container" id="about"></section>
<section class="container" id="music"></section>
<section class="container" id="news"></section>
<section class="container" id="videos"></section>
<section class="container" id="connect"></section>
<section class="container" id="contact"></section>

这是我的CSS：

body{
  margin: 0px;
  padding: 0px;
}

.container{
  width: 1920px;
  min-height: 1080px;
  background: 100% 100% no-repeat fixed;
  margin: 0 auto;
  background-color: transparent;
}


#home{background: url(../images/landingPage.png);}
#about{background: url(../images/about.png);}
#music{background: url(../images/music.png);}
#news{background-image: url(../images/news.png);}
#videos{background-image: url(../images/videos.png);}
#connect{background-image: url(../images/connect.png);}
#contact{background-image: url(../images/contact.png);}

在下面的JSFiddle中，顶部的三个部分向下滚动，而底部的四个部分向上滚动。

我想我还需要在等式中添加一些脚本。有人可以向我展示我发布的 jsFiddle。谢谢。

4

1 回答 1

1

为此，您需要一点 javascript。只需使每个元素（页面），但第一个元素绝对定位，而不是固定，并且在开始时 top:100% 以避免在文档加载时看到除第一个元素之外的任何元素，请执行以下操作：

按元素顺序添加每个连续元素顶部位置，即堆叠前元素的所有高度，当元素顶部边缘达到 100% 的顶部时，使元素在其相对定位之前...

选项二当所有页面都位于屏幕外（底部边缘下方）时，使用 on scroll 使每个页面逐页滚动，当一个底部边缘到达屏幕底部边缘时，开始移动另一个......

于 2013-08-24T07:08:33.030 回答