我想要使一个标题div(如横幅)固定只有当标题试图退出屏幕,当用户滚动下来.可以不使用JS吗？对于Facebook时间轴上的一个例子,如果我们向下滚动一个横幅,浮动页面的页眉会离开屏幕.我的问题是,只能使用CSS吗？
如果不够清楚,我想知道是否有条件地应用样式“position：fixed”,就像页面的80px滚动一样.
解决方法
是.你可以使用CSS来做到这一点.这是通过将正常的滚动标题放置在固定的标题之上,仅在正常滚动标题向上滚动之后显示.这是
http://techcrunch.com这样做的.
更新[10/31/2013] – Techcrunch最近改变了他们的UI,所以你再也看不到了！
检查此演示：http://jsfiddle.net/WDnyb/2/
HTML
<div class="header">Header</div>
<div class="outer">
<span class="banner">logo</span>
<div class="header">Header</div>
</div>
<div class="content">Content</div>
相关CSS
.header {
width: 100%;
position: fixed;
top: 0;
bottom: auto;
}
.outer {
position: relative;
height: 100px;
}
.outer .header {
position: absolute;
bottom: 0;
z-index: 2;
top: auto;
}
.content {
height: 1500px;
margin-top: 100px;
}
