html - ロゴを固定位置ヘッダーに従わせるにはどうすればよいですか？

Question

約40pxの高さの固定位置ヘッダーバーがあります。これは、元の（スクロールされていない）位置の80pxの高さのロゴの上にあります。

下にスクロールして元のロゴを通過するときに、ロゴを縮小（およびヘッダーバーに配置）したい。どうすればこれを行うことができますか？

（ TechCrunchのように見せたい）

Answer 1

リンクの効果を正確に模倣したいかどうかはわかりませんが、模倣する場合は、これがその方法の例です。デモフィドルを参照してください。

スタイルシート：

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

マークアップ：

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

Win7でIE7、IE8、IE9、Opera 11.51、Safari 5.0.5、FF 6.0、Chrome13.0でテストされています。