Поместите ребенка поверх штабелируемых секций

.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: sticky;
  top: 25%;
  left: 10px;
  width: 20px;
  height: 20px;
  background: transparent;
  border: 2px solid red;
  z-index: 10; 
}

.make-sticky p {
  margin-top: 50vh; 
}

   <div className = "scrollable">
    <section class = "make-sticky" id = "section1">
      <div class = "line"></div>
      <div class = "square"></div>
      <p>Lorem ipsum dolor sit amet</p>
    </section>

    <section class = "make-sticky" id = "section2">
      <div class = "line"></div>
      <div class = "square"></div>
      <p>Quod magni natus dignissimos</p>
    </section>

    <section class = "make-sticky" id = "section3">
      <div class = "line"></div>
      <div class = "square"></div>
      <p>Quod magni natus dignissimos</p>
    </section>
  </div>

:root {
  --sticky-section-height: 100vh;
}

* {
  box-sizing: border-box;
}

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

.make-sticky {
  height: var(--sticky-section-height);
  box-sizing: border-box;
  border-bottom: 1px solid green;
  padding: 10px;
  background-color: var(--clr);
  position: relative;
}

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

.sticky-container {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 10;
  border: 2px solid rgb(0, 21, 255);
}

.square {
  position: sticky;
  color: white;
  top: 0px;
  /* Margin used to position the element horizontally*/
  margin-left: 10px;
  margin-bottom: calc((var(--sticky-section-height) - 20px));
  width: 20px;
  height: 20px;
  background: black;
  border: 2px solid red;
  /* Adjust this percentage based on your design */
}

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

<div class = "scrollable">

  <div class = "sticky-container">
    <div class = "square">1</div>
    <div class = "square">2</div>
    <div class = "square">3</div>
  </div>

  <section class = "make-sticky" style = "--clr: green" id = "section1">
    <div class = "line"></div>
    <p>Lorem ipsum dolor sit amet</p>
  </section>

  <section class = "make-sticky" style = "--clr: orange" id = "section2">
    <div class = "line"></div>
    <p>Quod magni natus dignissimos</p>
  </section>

  <section class = "make-sticky" style = "--clr: cyan" id = "section3">
    <div class = "line"></div>
    <p>Quod magni natus dignissimos</p>
  </section>
</div>

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