滚动时如何使 <div> 彼此垂直擦除？答案

【问题标题】：How do I make <div>s wipe vertically onto each other when scrolling?滚动时如何使 <div> 彼此垂直擦除？
【发布时间】：2013-07-15 14:37:35
【问题描述】：

我有几个position:fixed; div。当我向下滚动时，我希望第一个 div 看起来“擦除”第二个，以此类推其他几个 div。

我该如何编码？谢谢。

【问题讨论】：

请提供代码并演示自己已经尝试过这样做的一些尝试。
如果 div 正在移动，那么它们并没有真正固定，是吗？
@Tro - jsfiddle.net/YB9nV 目前，当 div 到达页面顶部时，它们会粘住，成为下一个 div 滚动的新“低 div”。我希望所有 div 都是静态的，但是在滚动时，它们会相互“擦除”。
@Stano，我的意思是 div 实际上并没有明显移动——但它们的可见性向上滚动。像这样：youtu.be/KjdQHr6_FT4 感谢您修复 jsfiddle。该代码最初在 Chrome 中为我工作......
找到了类似的东西，但不知道怎么做。 stackoverflow.com/questions/5509492/… 如果有人知道如何进行转换，这可能会有所帮助：jsfiddle.net/YB9nV/3。

标签： javascript css html fixed

【解决方案1】：

是的，您可以：

<div class="divFixed">fixed</div>
<div class="divFlow">...lots of content</div>

.divFixed {
    position: fixed;
    z-index: 10;
    background: red;
    height: 100px;
    width: 100%;
}
.divFlow {
    position: absolute;
    z-index: 20;
    background: yellow;
    margin-top: 100px;
    width: 50%;
}

JSFiddle DEMO

【讨论】：

嗨，抱歉我的含糊不清——这不是我的意思。这是我已经拥有的——jsfiddle.net/YB9nV。我希望两个 div 都是静态的，但会相互擦除，就好像您正在向上滚动 z-index 一样。

【解决方案2】：

您可以比较初始元素的顶部位置值和当前窗口的滚动顶部位置，并根据需要将位置从固定位置更改为绝对位置：

$(function () {
    var divs = $('#div1, #div2, #div3');
    divs.each(function(){
        $(this).attr('data-top', $(this).position().top);
    });
    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        divs.each(function(){
            var datatop = $(this).attr('data-top');
            if (datatop > scrollTop) {
                this.style.position = 'absolute';
                this.style.top = datatop + 'px';
            } else {
                this.style.position = 'fixed';
                this.style.top = '0px';
            }
        });
    });
});

http://jsfiddle.net/QTHuL/5/

【讨论】：