CSS中的固定标题用于条件向下滚动？

Question

我希望只有当用户向下滚动时标题试图离开屏幕时才能修复标题div(如横幅).是否可以不使用JS？对于Facebook时间线中的一个示例,如果我们向下滚动横幅,一旦页面标题退出屏幕,横幅就会浮动.我的问题是,是否可以只使用CSS？

如果不够清楚,我想知道是否可以有条件地应用样式"position:fixed",就像滚动80px的页面一样.

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

Answer 2

这现在可以正确完成，无需 javascript 与position: sticky.

有关示例，请参阅https://css-tricks.com/position-sticky-2/。

警告：在撰写本文时，IE11、opera mini和 android 的股票浏览器不支持它：https : //caniuse.com/#feat=css-sticky