我有一个组件,它在顶部有一个“粘性”头部和一系列使用混合模式的元素列表。在这个简化的例子中,它是包含在div中的标题。
它一直很好地工作,直到我滚动内容为止。如果我向下滚动,混合模式也会应用于与我不想要的元素进行混合的“粘性”头部。
是否有任何方法使“粘性”头部忽略另一个元素的混合模式,并始终只覆盖背后的元素。
请参见下面的代码。
<div>
<div style="display: flex; flex-direction: column; height: 700px; max-height: 700px; overflow: auto; text-align: center;">
<div style="position: sticky; top: 0px; background: blue;">Sticky</div>
<div style="background: lightblue;">
<h1 style="background: red; mix-blend-mode: multiply;">ABC</h1>
</div>
<div style="background: lightblue;">
<h1 style="background: red; mix-blend-mode: multiply;">ABC</h1>
</div>
/* a lot of other elements like 2 above*/
</div>
</div>