html - 我怎样才能使 Logo 跟随固定位置标题？

Question

我有一个固定位置的标题栏，高度约为 40 像素。它位于原始(未滚动)位置的 80px 高度 Logo 上方。

我希望在向下滚动通过原始 Logo 时缩小 Logo (并放置到标题栏中)。我怎么能这样做？

(我希望它看起来像 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 上测试。