Bring child on top of stacking sections

I want .square div to be always on top, so visually it seems like the next section with its own .square is sliding up and the .square stops exactly in the position of previous section's square.

The following code does just that:

$(document).ready(function() {
  const sections = document.querySelectorAll('.make-sticky');

  const observer = new IntersectionObserver(entries => {
    entries.forEach(({ target, isIntersecting }) => {
      if (isIntersecting) {
        $(target).addClass('sticky-section');
      } else {
        $(target).removeClass('sticky-section');
      }
    });
  }, {
    root: null,
    rootMargin: '0px',
    threshold: 0.1 // Trigger when 10% of the element is visible
  });

  sections.forEach((section) => {
    observer.observe(section);
  });
});

.scrollable {
  border: 5px solid red;
  position: relative;

  .make-sticky {
    position: relative;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;

    .line {
      position: absolute;
      left: 20px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: black;
    }

    .square {
      position: absolute;
      left: 10px;
      width: 20px;
      height: 20px;
      background: transparent;
      border: 2px solid red;
      top: 25%; /* Adjust this percentage based on your design */
      z-index: 1;
    }

    p {
      margin-top: 50vh; /* Center text vertically */
    }

    &.sticky-section {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js"></script>
        <div class="scrollable">
            <section class="make-sticky" style="background: cyan" id="section1">
                <div class="line"></div>
                <div class="square"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 1111111111111111111111 Esse tempora facere beatae, harum voluptatibus eveniet explicabo corporis suscipit error sit nostrum minima ducimus, perspiciatis aperiam blanditiis labore iure quidem est.</p>
            </section>

            <section class="make-sticky" style="background: salmon" id="section2">
                <div class="line"></div>
                <div class="square"></div>
                <p>Quod magni natus dignissimos, voluptate incidunt ddddddddddddddddddddddddddddd reiciendis culpa labore nihil veritatis quasi eum exercitationem, laboriosam impedit tenetur deleniti itaque? Velit atque provident labore corrupti libero eius nostrum. Distinctio, qui pariatur?</p>
            </section>

            <section class="make-sticky" style="background: yellowgreen" id="section3">
                <div class="line"></div>
                <div class="square"></div>
                <p>Quod magni natus dignissimos, voluptate incidunt 222222222222222222222222 reiciendis culpa labore nihil veritatis quasi eum exercitationem, laboriosam impedit tenetur deleniti itaque? Velit atque provident labore corrupti libero eius nostrum. Distinctio, qui pariatur?</p>
            </section>

            <section class="make-sticky" style="background: orange" id="section3">
                <div class="line"></div>
                <div class="square"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 3333333333333333333333333333 Esse tempora facere beatae, harum voluptatibus eveniet explicabo corporis suscipit error sit nostrum minima ducimus, perspiciatis aperiam blanditiis labore iure quidem est.</p>
            </section>

            <section class="make-sticky" style="background: blue" id="section4">
                <div class="line"></div>
                <div class="square"></div>
                <p>Quod magni natus dignissimos, voluptate 4444444444444444444444444444 incidunt reiciendis culpa labore nihil veritatis quasi eum exercitationem, laboriosam impedit tenetur deleniti itaque? Velit atque provident labore corrupti libero eius nostrum. Distinctio, qui pariatur?</p>
            </section>
        </div>

but the NEXT section covers the previous square when it "slides up".

There is no z-index set on any parent of my coding, so I wanted to use it, but it simply doesn't work.

What can I do in order to make it work?

Solution

I added a "floating-square" div that becomes visible when the first "make-sticky" secion reaches the top: 0 of the window, and goes off when the last section do the same.

$(document).ready(function() {
  const sections = document.querySelectorAll('.make-sticky');
  const floatingSquare = $('.floating-square');
  let scrollingDown = true;

  // Function to update floatingSquare visibility
  function updateFloatingSquareVisibility() {
    const firstSection = sections[0];
    const lastSection = sections[sections.length - 1];

    const firstSectionRect = firstSection.getBoundingClientRect();
    const lastSectionRect = lastSection.getBoundingClientRect();

    if (scrollingDown) {
      if (firstSectionRect.top <= 0) {
        floatingSquare.show();
      }
      if (lastSectionRect.top <= 25) {
        floatingSquare.hide();
      }
    } else {
      if (lastSectionRect.top > 25) {
        floatingSquare.show();
      }
      if (firstSectionRect.top > 0) {
        floatingSquare.hide();
      }
    }
  }

  // Intersection Observer to monitor sections
  const observer = new IntersectionObserver(entries => {
    entries.forEach(({ target, isIntersecting }) => {
      if (isIntersecting) {
        $(target).addClass('sticky-section');
      } else {
        $(target).removeClass('sticky-section');
      }
    });
  }, {
    root: null,
    rootMargin: '0px',
    threshold: [0, 0.25] // Trigger when 25% of the element is visible
  });

  sections.forEach((section) => {
    observer.observe(section);
  });

  // Event listener for scroll to determine scroll direction
  let lastScrollTop = 0;
  $(window).on('scroll', function() {
    const scrollTop = $(this).scrollTop();
    scrollingDown = scrollTop > lastScrollTop;
    lastScrollTop = scrollTop;
    updateFloatingSquareVisibility();
  });

  // Initial check for visibility
  updateFloatingSquareVisibility();
});

.scrollable {
  border: 3px solid darkblue;
  position: relative;

  .make-sticky {
    position: relative;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    margin-top: -22px;
    z-index: 1;

    .line {
      position: absolute;
      left: 20px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: black;
    }

    .square {
      position: absolute;
      left: 10px;
      width: 20px;
      height: 20px;
      background: transparent;
      border: 2px solid red;
      top: 25%; /* Adjust this percentage based on your design */
      z-index: 1;
    }

    p {
      margin-top: 50vh; /* Center text vertically */
    }

    &.sticky-section {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }
  }

  .floating-square {
    position: sticky;
    top: 25%; /* Match the position of the square */
    margin-left: 10px; /* Offset from the square for visibility */
    width: 20px;
    height: 20px;
    background: transparent;
    border: 2px solid red;
    z-index: 2; /* Ensure it is on top */
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div class="scrollable">
    <div class="floating-square"></div>
    <section class="make-sticky" style="background: cyan" id="section1">
        <div class="line"></div>
        <div class="square"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 1111111111111111111111 Esse tempora facere beatae, harum voluptatibus eveniet explicabo corporis suscipit error sit nostrum minima ducimus, perspiciatis aperiam blanditiis labore iure quidem est.</p>
    </section>

    <section class="make-sticky" style="background: salmon" id="section2">
        <div class="line"></div>
        <div class="square"></div>
        <p>Quod magni natus dignissimos, voluptate incidunt 22222222222222 reiciendis culpa labore nihil veritatis quasi eum exercitationem, laboriosam impedit tenetur deleniti itaque? Velit atque provident labore corrupti libero eius nostrum. Distinctio, qui pariatur?</p>
    </section>

    <section class="make-sticky" style="background: yellowgreen" id="section3">
        <div class="line"></div>
        <div class="square"></div>
        <p>Quod magni natus dignissimos, voluptate incidunt 3333333333333333 reiciendis culpa labore nihil veritatis quasi eum exercitationem, laboriosam impedit tenetur deleniti itaque? Velit atque provident labore corrupti libero eius nostrum. Distinctio, qui pariatur?</p>
    </section>

    <section class="make-sticky" style="background: orange" id="section4">
        <div class="line"></div>
        <div class="square"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 44444444444444 Esse tempora facere beatae, harum voluptatibus eveniet explicabo corporis suscipit error sit nostrum minima ducimus, perspiciatis aperiam blanditiis labore iure quidem est.</p>
    </section>

    <section class="make-sticky" style="background: blue" id="section5">
        <div class="line"></div>
        <div class="square"></div>
        <p>Quod magni natus dignissimos, voluptate 5555555555 incidunt reiciendis culpa labore nihil veritatis quasi eum exercitationem, laboriosam impedit tenetur deleniti itaque? Velit atque provident labore corrupti libero eius nostrum. Distinctio, qui pariatur?</p>
    </section>

</div>