Question

我正在尝试复制此页面上显示的效果：http://www.falve.co.nz/collection/

当您滚动页面时，较暗的英雄部分下方的白色部分会滚动到顶部英雄部分的顶部，就像一个窗帘。

我该如何复制？这是一个jQuery的东西还是CSS的位置？真的不确定如何处理这个问题？

Answer 1

这称为 parallax effect ，它是通过javascript实现的。

以下是您可以用于自己项目的few resources。

Answer 2

如果您使用position:fixed和position : absolute，则可以使用图片背景上方的内容传递创建效果。在捕获滚动事件时，有一些jquery效果来管理文本的fadeOut()。

<body>
    <div id="top">
    </div>
    <div id="content">   
    </div>
</body>

<强> CSS

#top{
    position:fixed;
    height : 200px;
    width : 100%;
    background-image:url("http://www.falve.co.nz/site/uploads/2012/09/1500x900-collection-page-image.jpg");
    background-size:cover;
    z-index:1;
}

#content{
    position:absolute;
    height : 2000px;
    margin-top:200px;
    width : 100%;
    background-color:#F99;
    z-index:2;
}

您在http://jsfiddle.net/UVWdg/

上有此示例

在上面的div顶部滚动一个div

2 个答案: