在滚动条上导航栏后面固定div折叠

Question

不确定如何正确地标出标题 - 基本上我想知道固定标题div如何消失在此编码板中导航栏后面。

http://codepen.io/Guilh/pen/JLKbn

标题代码：

header {
height: 300px;
padding-top: 50px;
background: #f07057;
position: fixed;
width: 100%;
top: 0;
}

导航条形码：

.main-nav {
background: #fff;
height: 80px;
z-index: 150;
margin-bottom: -80px;
box-shadow: 0 2px 3px rgba(0,0,0,.4);
position:relative;
}

这是怎么回事？相反，我的尝试在这里：

http://codepen.io/Sasoon/pen/bVNVQv

非常感谢！

Answer 1

将您的.filler块投射为相对的，以便在滚动时将其设置在固定块上方并添加背景填充。

以下是您修改的示例： http://codepen.io/anon/pen/YyPWpX

Answer 2

在codepen1中，他们使用了一个脚本，当滚动页面时，该脚本会向导航添加一个类。因此，一旦添加新类（向下滚动），将固定导航位置。如果用户向上滚动页面，则将删除该类。如果您添加他们使用过的javascript，您可以获得相同的功能。