Question

我正在尝试建立一个视差滚动网站，但我遇到了一些麻烦。我的所有内容div都堆叠在一起，我无法弄清楚要做什么让它们停止。

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/

Answer 1

在这里，我只想通过查看您给出的代码（我没有在我的系统上尝试过）来回答。看看上面给出的CSS，我没有看到Z-index提到的任何地方。

大多数情况下，这种重叠问题将由z-index修复。

我建议你尝试一次。

参考：Link

内容在视差网站中重叠

1 个答案: