在CSS中固定标题用于条件向下滚动？ [英] Fixed header in CSS for conditional scroll down?

问题描述

我想让标题div（如横幅）固定，只有当标题试图在用户向下滚动时离开屏幕。是不是可以不使用JS？对于Facebook时间轴中的示例，如果我们向下滚动，当页面的标题离开屏幕时，横幅将立即浮动。我的问题是，是否可以只使用CSS？

I want to make a header div (like a banner) fixed only when the header is trying to go out of the screen as the user scrolls down. Is it possible to do without using JS? For an example in Facebook timeline, if we scroll down a banner floats up as soon as the page's header goes out of the screen. My question is, is it possible to do with only CSS?

如果不够清楚，我想知道一个样式position：fixed

In case it is not clear enough, I want to know whether a style "position: fixed" can be applied conditionally like when 80px of the page is scrolled.

推荐答案

可以。您可以使用只是CSS。这是通过一个正常的滚动标题，放置在一个固定的，只有在正常滚动上面它之后才显示。这是 http://techcrunch.com 如何做的。

Yes. You can do it with just CSS. This is done by having a normal scrolling header, placed above a fixed one, which shows up only after the normal one scrolls up above it. This is kind of how http://techcrunch.com is doing it.

更新[10/31/2013] - Techcrunch最近更改了自己的用户界面，因此您无法再看到此操作。

Update [10/31/2013] - Techcrunch changed their UI recently so you cannot see this there anymore!

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

这篇关于在CSS中固定标题用于条件向下滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！