带有“图层”的视差 CSS 滚动

Question

我需要在主页的一部分中具有“分层外观”。像下面这样的东西

http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html

特别是从幻灯片 3 到幻灯片 4，它从底部开始然后向上显示项目的方式

我试过这个

body {
    margin: 0;
}

#main {
    height: 700px;
    position: relative;
    z-index: 2;
    background: blue;
}

#revealed-section {
    height: 400px;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: green;
}

#revealed-section-placeholder {
    height: 400px;
}

<div id="main">Scroll down!</div>
<div id="revealed-section-placeholder"></div>
<div id="revealed-section">
    <h1> Content here </h1> <br/><br/>
    <h1> Content here </h1> <br/><br/>
    <h1> Content here </h1> <br/><br/>
    <h1> Content here </h1> <br/><br/>
</div>

http://jsfiddle.net/qYbs7/1/

但我的问题是，如果它是一个完整的页面解决方案，那么它是有效的，但是一旦我希望它作为我的 React 页面中的一个组件，它就不起作用了。例如，底部：0 会转到我主页的最底部，并且它不包含在 div 中。

也许我忽略了一些东西，但如果更有经验的人可以将该代码复制并粘贴到反应组件中，最好使用顺风，那将会有很大帮助。

Answer 1

您不需要

position: fixed

，因为当您使用固定位置时，该元素将从正常文档流中删除，并且不会在页面布局中为该元素创建空间。

此网站使用名为

background-attachment

的属性。

background-attachment

属性设置背景图像是与页面的其余部分一起滚动还是固定。在这个网站上，特别是从幻灯片3到幻灯片4，更好地说，它创建了一个固定的背景图像，在滚动时缓慢出现。试试这个：

    <div id="main">Scroll down!</div>
    <div id="revealed-section">
        <h1> Content here </h1> <br /><br />
        <h1> Content here </h1> <br /><br />
        <h1> Content here </h1> <br /><br />
        <h1> Content here </h1> <br /><br />
    </div>

这是CSS部分：

#main {
    background-image: url("https://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/images/Slide4/desktop4.jpg");
    min-height: 700px;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

#revealed-section {
    height: 400px;
    bottom: 0;
    width: 100%;
    background: green;
}