How to scroll the background image then the body scroll?

I want to create an engaging scrolling experience for the webpage where, on the initial scroll, a prominent image begins to move upward. As the user scrolls, the image will gradually ascend until it completely exits the view. Simultaneously, the background color of the page will transition, creating a dynamic visual effect. During this phase, the rest of the page content remains fixed. Once the image has fully scrolled out of sight, the normal scrolling behavior resumes, allowing the user to continue navigating through the remaining body content. This design aims to captivate users right from their first interaction with the page, offering a seamless and visually appealing transition from the image to the textual content.

var $pageContent = $('.page-width');
var $customProductPage = $('.custom-product-page');
var hasScrolledBackground = false;
var scrollThreshold = 300; // Adjust the threshold as needed
var initialOffset = -90; // Initial offset of -90px

// Set initial background position with the offset
$customProductPage.css('transform', 'translateY(' + initialOffset + 'px)');

$(window).on('scroll', function() {
  var scrollY = $(this).scrollTop();
  var effectiveScrollY = initialOffset - scrollY; // Add initial offset to the scroll value

  // Check if the background has scrolled sufficiently
  if (scrollY > scrollThreshold && !hasScrolledBackground) {
    $pageContent.css('opacity', 1); // Show content
    hasScrolledBackground = true;
  }

  // Translate the background image based on scroll
  $customProductPage.css('transform', 'translateY(' + effectiveScrollY + 'px)');
});

.custom-product-page {
  position: relative;
}

.page-width {
  max-width: 1044px;
  margin: 0 auto;
  padding: 0 20px;
}

.custom-product-page {
  position: absolute;
  top: 190px;
  z-index: -1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<section>
  <div class="custom-product-page">
    <img src="//proofhardicecream.com/cdn/shop/files/Rectangle_763.png?v=1718022726" alt="Background            Image">
  </div>
  <div class="page-width">
    <div class="grid">
      <div class="grid__item">
      </div>
      <div class="grid__item">
        <p>Here there is some text data which is currently in white color.</p>
      </div>
    </div>
  </div>
</section>