在滚动时使固定的 div 折叠在导航栏后面答案

【问题标题】：make fixed div collapse behind nav bar on scroll在滚动时使固定的 div 折叠在导航栏后面
【发布时间】：2015-11-29 05:31:07
【问题描述】：

不知道如何正确描述标题 - 基本上我想知道固定标题 div 是如何消失在此代码笔中的导航栏后面的。

标题代码：

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;
}

它是如何工作的？相比之下，我的尝试就在这里：

非常感谢！

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：