为固定背景图像设置滚动限制？

Question

有没有办法设置固定背景图像可以向下“滚动”页面的距离？ 实际上，一旦背景图像的底部距离其 div 容器的底部边缘 10 像素，有没有办法将背景附件更改为 static？

例如，在下面的代码中，如何让珊瑚渐变（只是图像的占位符）在页面距离红色和黄色 div 之间的边界 10vh 时停止滚动？ （仅 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

艾丹！

我的方法使用img标签而不是将其渲染为背景，而魔术是使用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>

您可以使用其容器的填充来调整边框偏移。

希望这可以帮助。 快乐指挥； ;)