How to position: fixed div relate to the its position: relative parent?

Question

I have a scrolling effect which I want to work on third section only. But It is working on the first div section due to the position: fixed div.

Can anybody see the code and help me out?

Thanks in advance

 let section = document.querySelector('section'); let text = document.querySelector('.text'); let innerText = document.querySelector('.innerText'); window.addEventListener('scroll', function() { let value = window.scrollY; section.style.clipPath = "circle("+ value +"px at center center)"; text.style.left = 100 - value/5 + '%'; innerText.style.left = 100 - value/5 + '%'; });

 body { background: #ffee57; } 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: fixed; 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: fixed; 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: fixed; 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; }

 <div class="wrapper"> <div class="section-01"></div> <div class="section-02"></div> <div class="section-03"> <h3>Scroll Down</h3> <h2 class="text">Lorem ipsum dolor sit amet</h2> <section> <h2 class="innerText">Integer posuere neque condimentum</h2> </section> <div class="container"> <h2>Also see the description</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis eleifend dolor. Duis vel neque sed mi commodo sagittis sit amet eu tellus. Donec vehicula leo ut condimentum faucibus. Aliquam bibendum et enim sed dictum. In sollicitudin maximus erat, eu fermentum dolor condimentum ac. Aliquam sagittis venenatis dolor quis laoreet. Fusce rutrum quis felis eu luctus. Nam quis justo ultricies, egestas dui non, aliquet sapien. Maecenas malesuada purus id sem luctus, et feugiat enim porta. Ut quis purus tempor, mattis leo a, facilisis tortor. Donec lacinia turpis vel quam convallis, sit amet placerat purus suscipit. Integer ultricies nunc vel efficitur vulputate. Fusce posuere tellus eu rutrum malesuada. Integer a eleifend ante, vitae consectetur risus. Suspendisse fringilla risus tortor. In non condimentum felis. Integer posuere neque condimentum, fringilla nulla in, finibus magna. Praesent lorem nulla, interdum eu cursus a, fermentum eget neque. Phasellus eu elit sed lectus viverra porttitor. Vestibulum molestie augue et dolor auctor ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse rhoncus tortor velit, id molestie lacus tincidunt dictum. Etiam ante diam, sodales ac risus vel, fermentum vulputate diam. Donec ac leo sit amet nibh consectetur facilisis. Donec sit amet magna sit amet nibh scelerisque maximus et blandit sem. Integer sapien velit, interdum at bibendum tempor, tincidunt ut tellus. Phasellus vel lectus et sapien cursus malesuada. Nullam quis ante mauris. In ac neque blandit, vehicula elit sed, tempor felis. Praesent vel rutrum lacus. Duis et placerat mi. Fusce imperdiet accumsan nibh nec lobortis. Cras porta tellus turpis, vitae eleifend nibh accumsan a. Sed laoreet vehicula libero vel pharetra. Etiam sed imperdiet nunc, et pulvinar ante. Phasellus maximus elit sit amet porta faucibus. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p> </div> </div> </div>

Answer 1

if you want to work on screen by fixed. and my script means when then third section show on the screen, let the scrolling effect work

$(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 + "%";
          }
        });
      });

or you can work on third section only by absolute. change section.innerText.text position to absolute

<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>