2nd sticky Add to Cart bar after scrolling product pages 25%

Is it possible to have similar functionality to what is on this page after the user starts scrolling?
https://deskview.co/collections/products/products/deskview-motis

I tried the code injection on this page:
https://forum.squarespace.com/topic/205722-add-second-cart-to-the-page/

but I couldn’t get anything to appear on my site (SS 7.0):
https://www.venndesign.co/

With Javascript I believe we can make the element display only after scrolling 25% down the page? When users first land on the page, the first add to cart is at the top of the page. But then upon scrolling, it will disappear. So after the user scrolls 25%, it would be nice to display the 2nd sticky Add to Cart block.

I messaged Tuan Phan who wrote some of the code on the forum topic above and we made some progress but he didn't know how to make the bar appear after scrolling 25%. I did some chatgpt queries and directionally feel close but still need help building a robust solution. Guidance and help is appreciated! 

+++++++++++++

window.addEventListener("scroll", function() {
  var scrollPosition = window.scrollY || window.pageYOffset;

  // Calculate the percentage of the page scrolled
  var scrollPercentage = (scrollPosition / (document.documentElement.scrollHeight - window.innerHeight)) * 100;

  // If scrolled more than 25%, show the popup
  if (scrollPercentage >= 25) {
    document.getElementById("popup").style.display = "block";
  }
});

document.getElementById("closeBtn").addEventListener("click", function() {
  document.getElementById("popup").style.display = "none";
});