Question

当你滚动时，我希望它们不是向下滚动页面以查看一堆div，而是希望它们叠加在同一个地方 - 一个堆叠在下一个上面。所以，你会向下滚动，但页面不会下降。相反，下一个div将覆盖第一个，依此类推。不知道怎么做？这就是我所拥有的：

的更新 的

.container {
    width:100%;
    height:100%;
    position:relative;

}

.container1 {
    display:block;
    position:fixed;
    margin-top:690px;
    width:100%;
    height:500px;
    z-index:1;
    background:#333;


  }

.container2 {
    display:block;
    position:absolute;
    margin-top:1190px;
    width:100%;
    height:500px;
    z-index:2;
    background:#F00;
}

<div class="container">

<div class="container1">
info
</div>

<div class="container2">
info
</div>
</div>

此调整正常，但底部div（container1）不是500px，而是设置为屏幕大小。我确信这是对代码的简单调整，但我很难过。

感谢您的帮助！

Answer 1

这是一个概念证明，虽然有效，但确实需要跨浏览器进行测试（但我相信它可以在任何地方使用）并稍微改进。

我们的想法是使用JavaScript来监控窗口的滚动位置，并相应地修复相应的内容面板，让人觉得在滚动浏览时新内容与它重叠。

http://jsfiddle.net/amustill/wQQEM/

Answer 2

使用固定位置而不是绝对位置：

.container1 {
    position: fixed;
    z-index: 1;
}
.container2 {
    position: fixed;
    z-index: 2;
}

Answer 3

为了仅使用CSS实现视差效果，您只需使用CSS background-attachment属性并将其设置为fixed并添加min-height

.parallax {
    /* The image used */
    background-image: url("img_parallax.jpg");

    /* Set a specific height */
    min-height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   }

查看此链接：
https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm

在滚动上叠加div

3 个答案: