Javascript Web，根据滚动位置更改z索引位置的解决方案

我正在为移动设备实现布局。下面是它应该如何显示的图片

这个模糊的蓝色背景是视频，因此在（固定位置）div中位于其他所有内容之后

当我继续滚动时，内容显示在标题顶部

有没有办法使标题div显示内容后面的背景

（“链接A”/“链接B”div正在使用

位置：sticky

）

到目前为止我都试过了

在页眉div剪切背景中使用重复的背景到页眉div和简介div.（

溢出：隐藏；高度：123px

）。对图像效果很好，但视频并没有完全同时播放

使用JS更改元素的z索引几乎可以正常工作，但滚动会在标题顶部快速闪烁内容。滚动事件被限制，只有在滚动实际发生后（异步回调），我才能进行css/dom更改。 这在Chrome中不是很糟糕，但在Safari中却很烦人

尝试了不同的方法：

addEventListener（'scroll'，callback）

、requestAnimationFrame和IntersectionObserver。它们都有相同的问题：异步回调

可能会有帮助，但只有Firefox支持

还有别的办法吗？谢谢