如何使徽标跟随固定位置标题？

Question

我有一个大约40px高度的固定位置标题栏。 它位于原始（非滚动）位置的80px高度徽标之上。

当我向下滚动传递原始徽标时，我希望徽标缩小（并放置在标题栏中）。 我怎么能这样做？

（我希望它看起来像TechCrunch）

Answer 1

我不确定您是否确实希望模仿链接中的效果，但如果您这样做，那么这是一个示例：see demo fiddle

样式表：

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

在IE7，IE8，IE9，Opera 11.51，Safari 5.0.5，FF 6.0，Chrome 13.0的Win7上测试。