html - 使固定的 div 在滚动的导航栏后面折叠

标签 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

非常感谢!

最佳答案

将您的 .filler block 相对于滚动时使其位于固定 block 上方并添加背景填充。

这里是你修改的例子: http://codepen.io/anon/pen/YyPWpX

关于html - 使固定的 div 在滚动的导航栏后面折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32374639/

相关文章:

javascript - 使用嵌套的 ul/li 避免双重事件 (onclick)

javascript - 如何获取javascript文件中的php session 值

html - 页面底部有两个重叠的图像

javascript - 移动设备上的 jQuery 实时滚动事件(解决方法)

javascript - jQuery - 检测水平滚动位置(像素),然后执行函数

java - 将 Java 小程序转换为 <object>

html - 如何在 HTML 输入中添加零?

jquery - Twitter Bootstrap 中本地轮播的背景更改轮播帮助

javascript - Jquery 灯箱不向下延伸

javascript - 如何在 Javascript 中计算将窗口滚动到图标中心位置的坐标?