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

时间:2015-09-03 11:41:27

标签: html css scroll position fixed

不确定如何正确地标出标题 - 基本上我想知道固定标题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

非常感谢!

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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