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

Question

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

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

（我希望它看起来像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>

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