How could I make the logo follow the fixed position header?
I have a fixed position hea开发者_运维技巧der 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)
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.
精彩评论