스크롤하는 동안 주 컨텐츠 영역 상단에 100 % 높이의 div를 스크롤하십시오.

Question

제가하려는 것은 설명하기가 조금 어렵습니다. 창 높이의 100 %가 될 "패널"을 갖고 싶고 웹 사이트의 주요 내용 위에 겹쳐서 표시하고 싶습니다. 내가 원하는 것은 메인 웹 사이트 콘텐트를 브라우저 창 상단에 고정시키고이 "패널"을 그 위에 놓는 것입니다. 이 부분은 z-index를 사용하는 것만으로 쉽습니다. 내가 겪고있는 문제는 브라우저 창의 상단에 고정 된 상태로 사이트의 주요 컨텐츠를 얻는 것입니다. 사용자가 을 아래로 스크롤하면 만 "패널"이 아래로 이동하여 웹 사이트의 주요 부분을 나타냅니다. 일단 패널이 브라우저 창 상단을 지우면 사이트의 주요 부분을 평상시처럼 스크롤하고 싶습니다. 나는 이것이 jQuery에 의해 구동되기를 바란다.

이 때 사용자가 스크롤 아래의 주요 내용의 맨 위에 슬라이드해야하는 오버레이는 다음과 같습니다

여기에 내가 가진 HTML입니다. 이것은 웹 사이트의 주요 내용입니다.

그리고 일부 CSS :

html, body {height:100%;} 

.panel {height:100%; background-color: rgba(186,85,85,0.38); position: relative; z-index:1;} 

.main {position: absolute; top:0px; min-height: 1500px;} 

편집이 : 무대에서 상승 커튼 등이 효과를 생각하십시오. 커튼이 올라가는 동안 스테이지는 그대로 유지됩니다.

Answer 1

지나치게 단순한 관점에서이 문제를 보는 경우 position: fixed을 사용하면 다른 사람이 스크롤하는 동안 주 콘텐츠 웹 사이트를 수정할 수 있습니다. 페이지를 스크롤하는 것은보기에 컨텐츠를 제공하도록 스크롤 커튼의 당신의 언급에

을 바탕으로

Answer 2

더스틴는, 내가 주 콘텐츠 영역 위에 배치 100 % 높이 사업부를 설정합니다. 찾고있는 고정 영역에 대해 확신 할 수 없었기 때문에 고정 된 div를 페이지 상단에 배치했습니다. "커튼"이 끝나면 해당 div가 스크롤되기를 원한다면 스크롤 위치를 기준으로 addclass를 조사해야 할 수 있습니다. 불행히도 Jquery에서 더 나은 사람을 물어보아야합니다. 그걸 도와주세요.

CSS :

html, body 
{ 
height: 100%; 
background-color: yellow; 
} 

#curtain { 
height: 100%; 
width: 500px; 
background-color: red; 
display: block; 
} 

#content { 
width: 500px; 
background-color: blue; 
} 

#both { 
height: 100%; 
width: 500px; 
margin-left: auto; 
margin-right: auto; 
} 

#sticky_content { 
position: fixed; 
top: 0px; 
left: 50%; 
width: 200px; 
background-color: green; 
} 

HTML :

<div id="both"> 
<div id="sticky_content">This Sticks</div> 
<div id="curtain">Text?</div> 
<div id="content">This is where the main page body content would go...</div> 
</div> 

는 여기에 함께 넣어 JsFiddle입니다. 커튼은 빨간색이고, 내용 영역은 파란색이며, 끈적 끈적한 영역은 구별을 분명하게 유지하기 위해 초록색입니다. 저를 돕는 당신의 노력에 대한

-Marcatectura

Answer 3

감사합니다 여러분. 나는 꽤 좋은 해결책을 찾았다 고 생각한다. Curtain.js라는 이름의 편리한 것을 발견했습니다. https://github.com/Victa/curtain.js이 플러그인은 내가 찾고있는 것과 똑같은 효과를냅니다 :)