Javascript 创建类似z索引的效果

我不是前端开发人员，如果我的问题看起来很简单，那么很抱歉。我搜索了一整天，想知道如何创建一个z-索引效果，但有一个特殊的条件。（Z-index不适用于我想要实现的目标，这很正常）

我想找到一种方法，使文本在穿过一个div时消失并出现。但我使用z-index的问题如下：第一个div的文本在穿过红色div时不会消失

---

如果你不能正确理解这个问题，你可以在这个网站的主页上看到一个演示，只要向下滚动，你就会看到

position:fixed不尊重CSS规范的z-index原因，所以您需要javascript。请看下面的代码

text=document.getElementsByTagName（“h1”）；
window.addEventListener（“滚动”，滚动）；
界限=[]；
对于（i=0；iposition:fixed不尊重CSS规范的z-index原因或其他原因，因此您需要javascript。请查看以下代码


text=document.getElementsByTagName（“h1”）；
window.addEventListener（“滚动”，滚动）；
界限=[]；
对于（i=0；i您几乎可以胜任，您只需将文本剪辑到它的部分即可。您可以使用
clip path


#firstDiv{
位置：相对位置；
宽度：100%；
高度：500px；
背景颜色：绿色；
}
#二等兵{
位置：相对位置；
宽度：100%；
高度：500px；
背景色：红色；
}
h1{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：白色；
}
#第一组，
#二等兵{
剪辑路径：插入（0）；
}

文本第一部分
文本第二部分
你几乎做得很好，你只需要将文本剪辑到它的部分。你可以使用
剪辑路径来实现这一点


#firstDiv{
位置：相对位置；
宽度：100%；
高度：500px；
背景颜色：绿色；
}
#二等兵{
位置：相对位置；
宽度：100%；
高度：500px；
背景色：红色；
}
h1{
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：白色；
}
#第一组，
#二等兵{
剪辑路径：插入（0）；
}

文本第一部分
文本第二部分
当前正在修补此分区，请稍候。这只是这两个分区，还是您在红色分区下添加了更多分区？我想添加更多分区。您需要更改滚动百分比。添加的分区越多，这是否回答了您的问题？当前正在修补此分区，请稍候。是这两个分区还是您正在添加更多分区呃，红色的那个？我想添加更多类似的内容。添加的div越多，您需要更改滚动百分比。这回答了您的问题吗？位置固定确实尊重z索引。只是它被放在不同的堆栈上下文中位置固定确实尊重z索引。只是它被放在不同的堆栈上下文中
<div id="firstDiv">
    <h1 style="">text first div</h1>
</div>
<div id="secondDiv">
   <h1>text second div</h1>>
</div>

#firstDiv
{
 position: relative;
 width: 100%;
 height: 500px;
 background-color:green;
 z-index: 1;
}

#secondDiv
{
  position: relative;
  width: 100%;
  height: 500px;
  background-color: red;
}

h1
{
  position:fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}