Fixed header in CSS for conditional scroll down?

This can now be done properly and without javascript with position: sticky.

Refer to https://css-tricks.com/position-sticky-2/ for examples.

warning: At the moment of writing, it is not supported on IE11, opera mini, and android's stock browser: https://caniuse.com/#feat=css-sticky

It is not possible using css. You can do using JavaScript or jQuery. Because it need some conditions.

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.

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

Check this demo: 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>

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