css - 固定 CSS 中的标题以进行有条件的向下滚动？

Question

我只想在用户向下滚动时标题试图离开屏幕时固定标题 div(如横幅)。不使用JS可以吗？以 Facebook 时间线为例，如果我们向下滚动，则当页面标题离开屏幕时，横幅就会浮起。我的问题是，是否可以仅使用 CSS？

如果不够清楚，我想知道是否可以像页面滚动80px时那样有条件地应用样式“position:fixed”。

Answer 1

是的。您可以仅使用 CSS 来完成。这是通过将一个普通的滚动标题放置在一个固定的标题上方来完成的，只有在普通的滚动标题在其上方向上滚动后才会显示。这是怎样的http://techcrunch.com正在做。

更新 [2013 年 10 月 31 日] - Techcrunch 最近更改了他们的用户界面，所以你再也看不到这个了!

查看此演示: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;
}