Есть ли способ замаскировать липкий элемент, используя абсолютный элемент? ⇐ CSS

[Anonymous]

Я пытался создать изображение с фиксированным положением, которое меняется при прокрутке через границу между двумя разделами моей страницы. Таким образом, по сути, должно быть два изображения с закрепленными позициями: верхнее замаскировано нижней частью, а нижнее — верхней частью. Мне не удается найти способ замаскировать оба изображения одновременно (вы можете использовать нижний раздел div, чтобы скрыть верхнее изображение, и наоборот, но не оба одновременно).
Вот изображение, иллюстрирующее то, что я пытаюсь сделать.
Вот код, который я использую:

Код: Выделить всё

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

Код: Выделить всё

Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/628 ... te-element