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

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

我正在让自己成为一个投资组合网站，它有 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>

我没有写任何 JS 来配合 HTML 和 CSS，因为我不知道该输入什么。

第一次使用这个论坛，如果我错过了一些设置或功能来帮助你回答我的问题，我深表歉意。提前致谢，马特。

最佳答案

这个 parallax scrolling tutorial 可能会有所帮助。

更新:Simple technique for Parallax Scrolling

Demo , Demo(simple technique)