在滚动上叠加div [英] Overlay divs on scroll

问题描述

而不是向下滚动页面来查看一堆div，我想让它们覆盖在同一个地方 - 一个堆叠在下一个 - 当你滚动。所以，你会向下滚动，但页面不会下降。相反，下一个div将覆盖第一个等等，依此类推。不知道如何做到这一点？这是我有的：

更新 p $ p> .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，的屏幕。我确信这是一个简单的调整代码，但我很抱歉。

感谢任何帮助！

解决方案

这里是一个概念证明，虽然工程，但需要跨浏览器测试（但我相信它会工作无处不在）和略微精炼。

这个想法是使用JavaScript来监控窗口的滚动位置，并相应地修复相应的内容面板，给出了当滚动到视图时新内容重叠的错觉。 p>

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

Instead of scrolling down the page to view a bunch of divs, I would like them to overlay in the same place-- one stacked on top the next -- when you scroll. So, you would scroll down, but the page would not go down. Instead, the next div would overlay the first and so on and so forth. Not sure how to do this? Here is what I have:

UPDATE

.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>

This adjustment is working, but the bottom div (container1) is not 500px, but set to the size of the screen. I'm sure this is a simple adjustment to the code, but I am stumped.

Thanks for any help!

解决方案

Here is a proof of concept that, whilst works, does need to be tested across browsers (however I'm confident that it will work everywhere) and slightly refined.

The idea is to use JavaScript to monitor the window's scroll position and fix the appropriate content panel accordingly, giving the illusion that the new content is overlapping it when scrolling in to view.

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

这篇关于在滚动上叠加div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！