How could I make the logo follow the fixed position header?

Question

I have a fixed position header bar that is about 40px heigh. It is above the 80px heigh logo in the original (not scrolled) position.

I want the logo to be shrinked (and be placed to the header bar) when I scroll down pass the original logo. How could I do this?

(I want it to look something like TechCrunch)

Answer 1

I am not sure you exactly want to mimic the effect in your link, but if you do then this is an example of how: see demo fiddle

Style sheet:

#header {
    height: 40px;
    width: 100%;
    position: fixed;
    top: 0;
    background: #fff;
}
#content {
    margin-top: 41px;
}
#logo {
    position: relative;
    height: 200px;
    width: 200px;
    top: -41px;
    float: left;
    margin-bottom: -41px;
}

Markup:

<div id="header">
    <img src="..." alt="" />
    Menu
</div>
<div id="content">
    <div id="logo">
        <img src="..." alt="" />
    </div>
</div>

Tested on Win7 in IE7, IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.