Question

对于我措辞不好的标题真的很抱歉，但我不知道如何解释我的问题。

我正在制作一个投资组合网站，有4个主要部分，个人资料封面，生物，网站和摄影。目前，我在基本网站布局中将每个div叠加在一起。而不是让用户向下滚动页面查看每个部分作为一个长列表，我想使页面看起来分层。一旦用户到达第1部分的末尾，例如第2部分具有固定位置，直到第1部分完全离开浏览器窗口。我想要求的最好例子是由Vox Media完成的。

以下是一些示例html和css，以便您了解属性：

body, html {
    width: 100%;
    height: 100%;
} 

.div1 {
    width: 100%;
    height: 100%;
    background-color: yellow;
    padding-top: 300px;
}

.div2 {
    width: 100%;
    height: 1800px;
    background-color: red;
    padding-top: 300px;
}

.div3 {
    width: 100%;
    height: 2400px;
    background-color: blue;
    padding-top: 300px;
}

.div4 {
    width: 100%;
    height: 100%;
    background-color: green;
    padding-top: 300px;
}


<div class="div1"><h1>Profile Cover</h1></div>
<div class="div2"><h1>Bio</h1></div>
<div class="div3"><h1>Websites</h1></div>
<div class="div4"><h1>Photography</h1></div>

我没有编写任何与HTML和CSS一起使用的JS，因为我不知道要键入什么。

首次使用此论坛，如果我错过了某些设置或功能以帮助您回答我的问题，我会道歉。在此先感谢，马特。

Answer 1

此parallax scrolling tutorial可能会有所帮助。

更新：Simple technique for Parallax Scrolling

Demo，Demo(simple technique)

Answer 2

你在造型方面所拥有的是正确的！如果您正在使用HTML5，请务必将您div的所有父母都给予100％的高度，否则这将无效。在分层方面，您需要做的就是为每个div添加不同的背景颜色，以使网站看起来“切片”。

在完全离开浏览器窗口之前，如何将一堆div固定到1之前？

2 个答案: