如何在页面底部实现这种“剥离”效果？

Question

我正在尝试达到与on this website相同的效果（如果向下滚动到页面底部，您会看到地图出现一种“剥离效果”，就像之前的DIV一样在地图上滑动）。我试图在这个jsfiddle http://jsfiddle.net/GJ55B/中复制这个（用红色div而不是map）但是我必须丢失一些东西，因为它不起作用。 谢谢你的帮助

HTML

<div class="block">Block</div>
<div class="block">Block</div>
<div class="block">Block</div>
<div class="block">Block</div>
<div class="block">Block</div>
<div id="map"><div id="map-canvas"></div></div>

CSS：

Html, body {
    min-width: 980px;
    background: #CCC;
    font-family: 'Open Sans', sans-serif;


}
.block {    
    padding: 20px;
    background: green;
    height: 400px;
    width: 600px;
    margin-top: 30px;
    margin-left:50px;
}

#map {
    position: fixed;
    bottom: 0;
    z-index: 1;
}

#map, #map-canvas {
    width: 100%;
    height: 500px;
    float: left;
    background: red;
    position: relative;
    overflow: hidden;
}

Answer 1

地图只设置为position:fixed;bottom:0;width:100%。这使它“卡在”底部。

接下来，内容区域的地图比地图高z-index，以使其显示在顶部。

然后，内容的最后一部分有margin-bottom:500px，允许元素进一步滚动以显示地图。

Answer 2

使用此代码：

DEMO

<强> HTML

<div id="container">
    <div class="block a"></div>
    <div class="block b"></div>
    <div class="block c"></div>
</div>
<div id="map">
</div>

CSS

#container{
    margin-bottom:300px;
    position:relative;
    z-index:2;
}
.block{
    height:300px;
}
.a{background:tomato;}
.b{background:gold;}
.c{background:#4c5660;}
#map{
    position:fixed;
    z-index:1;
    height:400px;
    bottom:0;
    width:100%;
    background:url(http://lorempixel.com/700/400/) bottom center no-repeat;
}