시차 웹 사이트에서 내용이 겹치다

시차 스크롤 웹 사이트를 만들려고하는데 문제가 생겼습니다. 내 콘텐츠 divs는 모두 서로 위에 쌓여 있으며, 멈추게하려면 어떻게해야하는지 알 수 없습니다.시차 웹 사이트에서 내용이 겹치다

HTML

<body> 
    <div id="container"> 
     <div id="depth0" class="parallax"> 
<div id="home" class="parallax">A Greener Home scroll down</div> 

     <div id="depth1" class="parallax"> 
      <div id="nav"> 
      <a href="#home">home</a> 
      <a href="#gogreen">go green</a> 
      <a href="#yourarea">your area</a> 
      <a href="#howto">how to</a> 
      <a href="#benefits">benefits</a> 
     </div> 

     <div id="depth2" class="parallax"> 
     <div id="gogreen"><img src="assets/images/go green bg.png" width="1280" height="909"><img src="assets/images/go green bg2.png" width="1280" height="94"></div> 

     <div id="depth3" class="parallax"> 
      <div id="yourarea" class="parallax"> 
      <img src="assets/images/in your area bg.png" width="1280" height="576"> 
    <p><iframe src="http://batchgeo.com/map/2a9f0604b3bad18c47d7d2ab3dee7577" frameborder="0" width="80%" height="550" style="border:1px solid #aaa;border-radius:10px;"></iframe></p><p><small>View 
<a href="http://batchgeo.com/map/2a9f0604b3bad18c47d7d2ab3dee7577">In Your Area</a> in a full screen map</small></p> 
      </div> 

     <div id="depth4" class="parallax"> 
      <div id="howto" class="parallax"> 
<img src="assets/images/how to bg.png" width="1280" height="960"> 
<img src="assets/images/how to bg2.png" width="1280" height="520"> 
</div> 

     <div id="depth5" class="parallax">  
      <div id="benefits" class="parallax"> 
      <img src="assets/images/benefits bg.png" width="1280" height="491"> 
<img src="assets/images/benefits bg2.png" width="1280" height="71"> 
      </div> 



</div> 
</body>

CSS

@font-face { 
    font-family: 'capone_lightregular'; 
    src: url('caponelight-webfont.eot'); 
    src: url('caponelight-webfont.eot?#iefix') format('embedded-opentype'), 
     url('caponelight-webfont.woff') format('woff'), 
     url('caponelight-webfont.ttf') format('truetype'), 
     url('caponelight-webfont.svg#capone_lightregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
body{ 
    margin: 0px; 
    padding: 0px; 
    height: 7000px; 
    background-color: #FDFDFD; 
} 
.parallax { 
    position: fixed; 
    height: 100%; 
    width: 100%; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 
#nav { 
    position: fixed; 
    text-align:center; 
    width: 100%; 
} 
#nav a { 
    text-decoration: none; 
    text-align: center; 
    padding-right: 4%; 
    width: 100%; 
    font-size: 55px; 
    font-family: "Capone Light"; 
    color: #093; 
    font-style: normal; 
    text-transform: none; 
} 
#home { 
    height: 500px; 
    background-color: #FDFDFD; 
} 
#howto img { 
    width: 100%; 
} 
#depth5 #benefits img { 
    width: 100%; 
} 
#yourarea img { 
    width: 100%; 
} 
#gogreen img { 
    width: 100%; 
} 




#depth2 #yourarea p iframe { 
    margin-right: 10%; 
    margin-left: 10%; 
} 

#gogreen { 
    margin-left: 0; 
    width: 100%; 
    display: block; 
    height: 500px; 
    border: 5px solid #090; 
} 
#yourarea { 
    margin-left: 0; 
    width: 100%; 
    display: block; 
    height: 500px; 
    border: 5px solid #30C; 
} 
#howto { 
    margin-left: 0; 
    width: 100%; 
    display: block; 
    height: 500px; 
    border: 5px solid #CF3; 
} 
#benefits { 
    height: 500px; 
    border: 5px solid #90F; 
} 

body { 
    margin: 0; 
    padding: 0; 
    height: 7000; 
}

jQuery를

$(document).ready(function(){ 

//running scrollCheck() 
scrollCheck(); 
$(window).scroll(function(){ 
    scrollCheck();  
}); 

function scrollCheck(){ 

    //initialize variables 
    var pos = $(window).scrollTop(), //position of the scroll bar in pixels 
     q = .5;      //speed modifier 

    //parallax 
    $("#depth0").stop().animate({ 
     top: (-pos*1*q)+"px" 
    }); 
    $("#depth1").stop().animate({ 
     top: (-pos*2*q)+"px" 
    }); 
    $("#depth2").stop().animate({ 
     top: (-pos*3*q)+"px" 
    }); 
    $("#depth3").stop().animate({ 
     top: (-pos*4*q)+"px" 
    }); 

    //nav bar 
    $("#nav").stop().animate({ 
     top: Math.max(Math.min(1000,1000-pos),0)+"px" 
    }); 
} 
});

jsfiddle입니다 : 여기 http://jsfiddle.net/yKT9W/

출처

2014-01-23 user3198201

난 그냥보고 대답하는 것을 시도하고있다 당신이 준 코드 (필자의 시스템에서는 사용하지 않았다). 위에 주어진 CSS를 살펴보면 Z 인덱스가 어디에서 언급했는지 알지 못합니다.

대부분 중복되는 문제는 z- 색인으로 해결됩니다.

한 번 시도해 보시기 바랍니다.

참조 : Link 내가 Z- 인덱스를 사용하여 시도했다, 그러나 그것은 작동하지 않는 것

출처

2014-01-23 14:50:08

. 각 div가 마지막 페이지보다 페이지에서 더 아래쪽에있게하고 싶습니다. – user3198201

시차 웹 사이트에서 내용이 겹치다

답변

관련 문제