배경 이미지 스크롤

Question

내가 다른 게시물이 같은 거기서 알고

에 차단,하지만 정확한 답변을 찾을 수없는 것 ... 그래서 배경 이미지가 서로 위에 페이드 인 jquery 슬라이드 쇼를 만듭니다. body 태그에 배경 이미지를 두는 대신 전체 화면을 채우고 메뉴와 같은 다른 요소를 맨 위에 배치하는 div를 만듭니다. 그러나 뷰포트를 메뉴 높이보다 작게 아래로 스크롤하면 배경색 블록이 이미지 위로 이동합니다. 이 문제를 해결하기 위해 내가 생각할 수있는 모든 것을 시도했지만, 완전히 막혔습니다.

다음은 단순화 된 버전입니다. 빨간색 블록은 이미지가있는 위치이며, 검정색은 배경색이며 메뉴는 회색으로 겹쳐서 표시됩니다. CSS :

body, html { 
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
    background-color: #000000; 
    font-family: "Helvetica Neue", Arial, sans-serif; 
    font-size: 1em; 
    line-height: 1em; 
    color: #9E9E9E; 
    position: relative; 
} 
body { 
    text-align: center; 
} 
* {padding: 0px; margin: 0px} 
#wrap { 
    width: 100%; 
    min-height: 100%; 
    background-color: #900; 
    position: absolute; 
    z-index: 1000; 
} 
#menu_wrap { 
    width: 390px; 
    min-height: 100%; 
    background-color: #656262; 
    position: absolute; 
    z-index: 9999; 
    background: rgb(101, 98, 98); 
    background: rgba(101, 98, 98, 0.9); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; 
    filter: alpha(opacity=90); 
} 
#menu_wrap #menu_content { 
    padding: 40px; 
    height: 500px; 
} 

HTML : 어떤 도움 대단히 감사하겠습니다

<div id="wrap"></div> 

<div id="menu_wrap"> 
    <div id="menu_content">Menu content goes here - it could be any height.</div>Menu extends to here. 
</div> 

. 내가 방금 간단한 것을 놓친 것일 수도 있지만 벽돌 벽에 머리를 대고있는 것처럼 느껴진다. 감사.

Answer 1

여기에 jsfiddle 링크가 있습니다.

http://jsfiddle.net/Alfalfamale/dCgRW/1/

셋업의 문제는 부모가 항상에만 뷰포트 크기 몸, 인, 100 %의의 랩 사업부 최소 높이 (100 %) 항상 높이가 될 것입니다.

이 문제를 해결하기 위해 메뉴를 랩핑하여 옮긴 다음 절대적으로 배치하지 않고 플로팅하게했습니다. 이렇게하면 메뉴가 문서의 '인 플로'상태를 유지하고 #wrap의 공간을 차지합니다. 둘째로 랩에 overflow: hidden을 추가하여 본질적으로 왼쪽 메뉴를 지 웁니다. #wrap에 고정 : 나는 플로트 설정에서 필수적이지는 일부 스타일에 남아있는 수

, 난 당신이 자신 :)