Javascript 如何定位：固定div与其位置：相对父级相关？

我有一个滚动效果，我只想在第三部分工作。但是由于

位置：fixed

div，它在第一个div部分工作

有人能看到代码并帮我吗

提前谢谢

let section=document.querySelector（'section'）；
让text=document.querySelector（'.text'）；
让innerText=document.querySelector（'.innerText'）；
addEventListener（'scroll'，function（）{
让值=window.scrollY；
section.style.clipPath=“圆（“+value+”px在中心）”；
text.style.left=100-值/5+'%'；
innerText.style.left=100-值/5+'%'；
});
正文{
背景：#ffee57；
}
h3{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
利润上限：-100px；
颜色：#0e112e；
字号：4em；
}
.第01节{
位置：相对位置；
宽度：100%；高度：100vh；
背景：绿色；
}
.第-02节{
位置：相对位置；
宽度：100%；高度：100vh；
背景：蓝色；
}
.第-03节{
位置：相对位置；
宽度：100%；高度：100vh；
背景：红色；
溢出：隐藏；
}
部分{
位置：固定；
顶部：0；左侧：0；
宽度：100%；高度：100vh；
背景：url（'https://images.pexels.com/photos/691668/pexels-photo-691668.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940“）无重复中心/盖#0e112e；
显示器：flex；
证明内容：中心；
对齐项目：居中；
剪辑路径：圆形（中心为0）；
}
.innerText{
位置：固定；
顶部：50%；左侧：100%；
转换：翻译（-50%）；
空白：nowrap；
z指数：1；
字体大小：10vw；
颜色：#fff；
文本对齐：居中；
宽度：100%；
}
.文本{
位置：固定；
顶部：50%；左侧：100%；
转换：翻译（-50%）；
空白：nowrap；
z指数：1；
字体大小：10vw；
颜色：透明；
-webkit文本笔划：2px#0e112e；
文本对齐：居中；
宽度：100%；
}
.集装箱{
位置：相对位置；
利润上限：200vh；
背景：#0e112e；
填充：100px；
颜色：#fff；
}
.容器h2{
字号：2.5em；
边缘底部：20px；
}

向下滚动
Lorem ipsum dolor sit amet
整型波苏尔内克调味品
另请参见说明
Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔·奎斯·埃利芬德·多洛。两个人坐在同一个座位上。不要用调味汁。这是一句名言。在sollicitudin maximus erat中，欧盟发酵剂dolor调味品ac.Aliquam sagittis venenatis dolor quis laoreet。金丝雀。南奎斯·贾斯托·尤里西斯，埃格斯塔斯·杜伊农，阿利奎特·萨皮恩。他是一位杰出的艺术家。我们是临时的，马蒂斯·利奥·a，是侵权人。不要把它放在椅子上，坐在椅子上。整倍Ultrices无效率计算。红葡萄酒。整数是一个整数，是一个整数。弗林蒂拉侵权品吊牌。在非调味品猫。
Integer posuere-neque调味品，弗林利亚·努拉，finibus magna。不含酒精的发酵液、含酒精的发酵液。Phasellus欧盟精英选择了lectus viverra porttitor。前庭胎记。虎口浮雕和肘部浮雕同侧前庭；斜纹斜纹肌悬液，是一种不规则的分子。发酵前直径、苏打水含量、发酵液溢出直径。不要坐在设备旁边。不要坐在大石头上，坐在大石头上。Integer sapien velit，bibendum Temporal的interdum，tincidunt ut tellus。我们的生活和智慧都是如此。纳拉姆·奎斯·安特·莫里斯。在ac neque blandit，车辆精英，临时猫科动物。红葡萄酒。我是杜伊斯和普莱斯特。
Fusce-accumsan nibh-nec lobortis。这是一种特殊的生活方式。这是一辆自由的汽车。这是一种威胁。最大相位的最佳位置位于faucibus门。无便利。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：

如果您想在屏幕上工作，请通过修复。我的脚本意味着当第三部分显示在屏幕上时，让滚动效果工作

$(document).ready(function () {
        let section = document.querySelector("section");
        let text = document.querySelector(".text");
        let innerText = document.querySelector(".innerText");
        window.addEventListener("scroll", function () {
          let value = window.scrollY;
          let top = $(".section-02").offset().top
          let topValue = value - top;
          if(topValue > 0) {
            section.style.clipPath = "circle(" + topValue + "px at center center)";
            text.style.left = 100 - topValue / 5 + "%";
            innerText.style.left = 100 - topValue / 5 + "%";
          }
        });
      });

或者你只能用绝对值来处理第三部分。将
section.innerText.text
位置更改为绝对位置

<style>
      h3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-top: -100px;
        color: #0e112e;
        font-size: 4em;
      }

      .section-01 {
        position: relative;
        width: 100%;
        height: 100vh;
        background: green;
      }

      .section-02 {
        position: relative;
        width: 100%;
        height: 100vh;
        background: blue;
      }

      .section-03 {
        position: relative;
        width: 100%;
        height: 100vh;
        background: red;
        overflow: hidden;
      }

      section {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: url("https://images.pexels.com/photos/691668/pexels-photo-691668.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940")
          no-repeat center / cover #0e112e;
        display: flex;
        justify-content: center;
        align-items: center;
        clip-path: circle(0 at center center);
      }

      .innerText {
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translate(-50%);
        white-space: nowrap;
        z-index: 1;
        font-size: 10vw;
        color: #fff;
        text-align: center;
        width: 100%;
      }

      .text {
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translate(-50%);
        white-space: nowrap;
        z-index: 1;
        font-size: 10vw;
        color: transparent;
        -webkit-text-stroke: 2px #0e112e;
        text-align: center;
        width: 100%;
      }

      .container {
        position: relative;
        margin-top: 200vh;
        background: #0e112e;
        padding: 100px;
        color: #fff;
      }

      .container h2 {
        font-size: 2.5em;
        margin-bottom: 20px;
      }
    </style>
<script>
      $(document).ready(function () {
        let section = document.querySelector("section");
        let text = document.querySelector(".text");
        let innerText = document.querySelector(".innerText");
        window.addEventListener("scroll", function () {
          let value = window.scrollY;
          let top = $(".section-02").offset().top
          let topValue = value - top;
          if(topValue > 0) {
            section.style.clipPath = "circle(" + topValue + "px at center center)";
            text.style.left = 100 - topValue / 5 + "%";
            innerText.style.left = 100 - topValue / 5 + "%";
          }
        });
      });
    </script>
  </body>


h3{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
利润上限：-100px；
颜色：#0e112e；
字号：4em；
}
.第01节{
位置：相对位置；
宽度：100%；
高度：100vh；
背景：绿色；
}
.第-02节{
位置：相对位置；
宽度：100%；
高度：100vh；
背景：蓝色；
}
.第-03节{
位置：相对位置；
宽度：100%；
高度：100vh；
背景：红色；
溢出：隐藏；
}
部分{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：100vh；
背景：url（“https://images.pexels.com/photos/691668/pexels-photo-691668.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940")
无重复中心/盖#0e112e；
显示器：flex；
证明内容：中心；
对齐项目：居中；
剪辑路径：圆形（中心为0）；
}
.innerText{
位置：绝对位置；
最高：50%；
左：100%；
转换：翻译（-50%）；
空白：nowrap；
z指数：1；