javascript - 有没有办法使用绝对元素来屏蔽粘性元素？

Question

我一直在尝试创建一个粘性位置图像，当它滚动到我页面的两个部分之间的边界时会发生变化。所以基本上，应该有两个粘性位置图像，顶部的图像被底部遮盖，底部的图像被顶部遮盖。我无法找到同时屏蔽两个图像的方法(您可以使用底部 div 来隐藏顶部图像，反之亦然，但不能同时使用两者)。

Here's an image to illustrate what I'm trying to do

这是我使用的代码:

.lblue {
    height: 40vh;
    width:10vw;
    position: -webkit-sticky;
    position: sticky;
    top:30vh;
    left:45vw;
    background:lightblue;
}

.lred {
    height: 40vh;
    width:10vw;
    position: -webkit-sticky;
    position: sticky;
    top:30vh;
    left:45vw;
    background:lightcoral;
}

.blue {
    position: absolute;
    top:0;
    height:150vh;
    width:100vw;
    background:blue;
}

.red {
    position: absolute;
    top:100vh;
    height:100vh;
    width: 100vw;
    background:red;
}

    <div class="blue">
        <div class="lblue"></div>
    </div>
    <div class="red">
        <div class="lred"></div>
    </div>

谢谢!

Answer 1

这是一个解决方案。诀窍是使用图像作为 CSS 背景，因为 CSS 背景可以很容易地固定在 parent 的视口(viewport)中。

.blue {
    position: absolute;
    top:0;
    height:150vh;
    width:100vw;

    background: blue fixed linear-gradient(lightblue, lightblue) 45vw 30vh / 10vw 40vh no-repeat;
}

.red {
    position: absolute;
    top:100vh;
    height:100vh;
    width: 100vw;

    background: red fixed linear-gradient(lightcoral, lightcoral) 45vw 30vh / 10vw 40vh no-repeat;

}

<div class="blue"></div>
<div class="red"></div>

在此解决方案中，您可以使用 url(https://...) 将 linear-gradient(color, color) 替换为图像的 URL。我使用渐变是因为对于浏览器来说，渐变是(生成的)图像。所以，这个技巧实际上适用于图像。

position: absolute 也变得毫无用处，至少对于演示而言是这样。

较长的背景 规则可能需要一些解释。 background is a shorthand (= 在一行中编写多个属性的简短方法)用于:

background-color: red;
background-attachement: fixed;
background-image: linear-gradient(lightcoral, lightcoral);
background-position: 45vw 30vh;
background-size: 10vw 40vh;
background-repeat: no-repeat;