Jump to content

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

Recommended Posts

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";
});

2nd Add to Cart tray.png

image.png

Edited by tylerbenner
punctuation
Link to comment
  • Replies 0
  • Views 237
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.