Есть ли способ замаскировать липкий элемент с помощью абсолютного элемента?

Question

Я пытался создать закрепленное изображение положения, которое меняется по мере прокрутки границы между двумя разделами моей страницы. Итак, по сути, должно быть два прикрепленных изображения положения: верхнее маскируется нижней частью, а нижнее - верхней частью. Мне сложно найти способ замаскировать оба изображения одновременно (вы можете использовать нижнюю часть 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;
}

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

Спасибо!

Answer 1

Вот решение. Хитрость заключается в том, чтобы использовать изображения в качестве CSS фона, потому что CSS фон можно легко исправить в окне просмотра их родителей.

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

В этом решении вы можете заменить linear-gradient(color, color) URL-адресом вашего изображения, используя url(https://…). Я использовал градиенты, потому что для браузера градиенты - это (сгенерированные) изображения. Итак, этот трюк действительно работает с изображениями.

position: absolute также становится бесполезным, по крайней мере, для демонстрации.

Длинное правило background может потребовать некоторых пояснений. background - это сокращение (= короткий способ записать несколько свойств в одной строке) для:

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

Answer 2

position:fixed может это сделать, если у вас есть трюк clip-path, чтобы скрыть переполнение, чтобы каждый элемент отображался только внутри своего раздела

.lblue,
.lred {
  height: 40vh;
  width: 10vw;
  position: fixed;
  top: 30vh;
  left: 45vw;
  background: lightblue;
}

.lred {
  background: lightcoral;
}

.blue,
.red {
  height: 100vh;
  background: blue;
  clip-path: inset(0 0 0 0); /* this is important */
}

.red {
  background: red;
}

body {
  margin: 0
}

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