修正了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

在codepend1中，他们使用了一个脚本，该脚本将在滚动页面时为导航添加一个类。因此，一旦添加了新类(向下滚动)，导航的位置就会固定。如果用户向上滚动页面，则该类将被删除。如果你添加他们使用过的JavaScript，你可以得到相同的功能。

      <代码>