javascript - 我该怎么做滚动时相互垂直擦拭？

Question

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

我该如何编码？谢谢。

Answer 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 演示

Answer 2

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

$(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/