Установить лимит прокрутки для фиксированного фонового изображения?

Question

Есть ли способ установить пределы того, насколько фиксированное фоновое изображение может «прокручиваться» вниз по странице? Фактически, есть ли способ изменить прикрепление фона к stati c, когда нижняя часть фонового изображения находится, скажем, на 10 пикселей от нижнего края его контейнера div?

В приведенном ниже коде, например, как я могу заставить коралловый градиент (просто заполнитель для изображения) останавливать прокрутку страницы, когда она удаляется на 10vh от границы между красным и желтым div? (Только CSS предпочтительнее, хотя я также открыт для JS решений)

.red {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100vw;
  background: red fixed linear-gradient(lightcoral, lightcoral) 45vw 20vh / 20vh 20vh no-repeat;
}

.yellow {
  position: absolute;
  top: 100vh;
  height: 100vh;
  width: 100%;
  background-color: yellow;
}

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

Спасибо!

Answer 1

Aidan!

Мой подход использует тег img вместо рендеринга его в качестве фона, а magi c выполняется с помощью Position sitcky.

<style>
    body{
        margin: 0;
    }
    
    section{
        height:150vh;
        width: 100%;
    }
    
    .blue {
        background: rgb(23, 59, 71);
        padding: 10px 0;
    }

    .green {
        background-color: rgb(29, 82, 29);
    }

    .img{
        width: 100px;
        height: 100px;
        background-color: lightcoral;
        position: sticky;
        top: 50vh;
    }

</style>

<!-- body -->

<section class="blue">
    <div class="img"></div>
</section>

<section class="green"></section>

Вы можете поиграть с padding его контейнера, чтобы настроить смещение границы.

Надеюсь, это поможет. Удачного кондинга! ;)