我试图让我的Hello World在滑动时受到红色背景 colored颜色 的影响,如果可能的话,如何实现这一点?当下面的元素滑到文本后面时,文本应该会改变 colored颜色
body {
height: 150vh;
background: #000;
}
h1 {
mix-blend-mode: difference;
color: rgb(255, 255, 255);
z-index: 2;
}
.top {
position: sticky;
top: 0;
height: 50vh;
z-index: 1;
}
.bottom {
background: rgb(232, 12, 12);
position: sticky;
top: 0;
height: 50vh;
position: relative;
isolation: isolate;
}
<div>
<div class="top">
<h1>Hello World</h1>
</div>
<div class="bottom"></div>
</div>