로고를 고정 위치 헤더에 따라 어떻게 만들 수 있습니까?

Question

나는 약 40px의 고정 위치 헤더 바를 가지고있다. 원본 (스크롤되지 않은) 위치의 로고가 80px 이상입니다.

원본 로고를 아래로 스크롤 할 때 로고를 축소하고 (헤더 막대에 배치해야 함) 싶습니다. 어떻게하면됩니까?

난 당신이 정확히 링크의 효과를 모방하려는 확실하지 않다

Answer 1

(나는 TechCrunch 같은 것을보고 싶지)하지만 다음 할 경우이의 예입니다 방법 : 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에서 테스트되었습니다.