在滚动上覆盖 div答案

【问题标题】：Overlay divs on scroll在滚动上覆盖 div
【发布时间】：2012-09-28 02:05:41
【问题描述】：

而不是向下滚动页面来查看一堆 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，而是设置为屏幕大小。我确信这是对代码的简单调整，但我很难过。

感谢您的帮助！

【问题讨论】：

听起来你几乎想要一个翻转框 - lab.smashup.it/flip - 否则，你的界面会非常混乱 - 人们知道滚动条的用途，并且为你的 UI 颠覆它们可能会让人们不确定关于使用您的应用程序。
您好，感谢您的回复——不，不是翻盖盒。我只想在向下滚动时堆叠 div

标签： css html positioning z-index

【解决方案1】：

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

这个想法是使用 JavaScript 来监视窗口的滚动位置并相应地修复适当的内容面板，从而在滚动查看时产生新内容与其重叠的错觉。

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

【讨论】：

太棒了。它对我有很大帮助。我只在 chrome 上滚动时遇到问题。这是我的问题：stackoverflow.com/questions/20750240/…。感谢您的回答。我不知道没有它我能做什么。
嗨！这是一些很棒的代码。我试图达到一个非常相似但有些相反的效果。这意味着 scolling 会将当前面板向上推，并显示下一个面板。你对此有什么想法吗？
无法编辑：想要我正在寻找的是一种让即将到来的面板在当前面板下等待的方式，并且滚动会将当前幻灯片向上推以显示底层。

【解决方案2】：

为了仅使用 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

【讨论】：

这正是我想要的。没有 javascript，只有纯 css。

【解决方案3】：

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

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

【讨论】：

我试过了——没用。请看上面修改后的代码