접을 수있는 머리글이 더 이상 페이지에없는 순간 고정 된 머리글 스크롤을 허용 할 수 있습니까?

Question

우리는 모두 접을 수있는 헤더를 지금도 많이 보았습니다. 나는 이것이 페이지에 가져 오는 효과를 정말 좋아한다. 이 부서 효과를 얻고 싶습니다만, 실제로 고정 헤더의 기능이 필요하지 않습니다.

이제 접을 수있는 헤더가 완료된 것으로 보았습니다. 축소 가능한 헤더가 페이지에서 벗어나 자마자 고정 헤더가 작아지는 것을 보았습니다. 접을 수있는 머리글이 페이지에서 벗어난 고정 머리글을 더 이상 고정시킬 수 있습니까? 나머지 콘텐츠가있는 페이지에서 스크롤을 내리시겠습니까?

Demo

이

는 HTML

<div id="headerSlideContainer"> 

    <div id="headerSlideContent"> 

     Header content goes here! 

    </div> 
    <div id="new"> 
     Other Contents 
    </div> 

</div> 

이고, n은 여기에 CSS를 간다 ... 데모에 대한 아래 링크를 클릭 ..

Answer 1

나는 그것을 시도하고 나는 이것이 당신이 원하는 희망 ..

#headerSlideContainer { 
    position: absolute; 

    top:0px; 
    width: 100%; 

    height:1000px; 
    background: black; 
} 
#headerSlideContent { 
    width: 900px; 
    height: 50px; 
    margin: 0 auto; 
    color: white; 
    background:Red; 
    z-index:10000; 
    position:fixed; 
} 

#new{ 
    top:60px; 
    z-index:2; 
    height:100px; 
    background:Orange; 
    position:absolute; 
    color: white; 

} 

n 이것은 자바 스크립트입니다.