Web，根据滚动位置更改z-index位置的解决方案

问题描述

我正在为手机实现布局。这是图片的显示方式。

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

当我继续滚动时，内容将显示在标题上方。

有什么方法可以使Header div显示内容背后的背景？

（“链接A” /“链接B” div使用position:sticky）。

到目前为止我尝试过的。

1. 对Header div和Intro div使用重复的背景。在标题div剪切背景（overflow: hidden; height: 123px）中。对于图像效果很好，但是视频不能完全同时开始播放。

2. 使用JS更改元素的z-index几乎可以正常工作，但是快速滚动会在标题顶部闪烁内容。滚动事件受到限制，只有在实际发生滚动之后（异步回调），我才能更改CSS / dom。 在Chrome中不是很糟糕，但在Safari中确实很烦人。

尝试了不同的方法：addEventListener('scroll',callback)，requestAnimationFrame和IntersectionObserver。都有相同的问题：异步回调。

https://developer.mozilla.org/en-US/docs/Web/CSS/element会有所帮助，但只有Firefox支持。

还有其他方法吗？谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）