Show sticky add to cart button after scrolling past add to cart button

[PRETTYFRIDAYS]

Hey, I've just installed a sticky add to cart button with the code down below, but I only want it to show when the customer scrolls past the default one. Does anyone know how to do this? Thanks!

<button
id = "ProductSubmitButton-Sticky"
type="submit"
name="add"
form="{{ 'product-form-' | append: section.id }}"
class="product-form__submit button button--full-width button--primary"
{% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
  disabled
{% endif %}
style="position: fixed;bottom: 0;left: 0;margin-bottom: 0;z-index: 999;"
>
	<span>
	  {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
		{{ 'products.product.sold_out' | t }}
	  {%- else -%}
		{{ 'products.product.add_to_cart' | t }}
	  {%- endif -%}
	</span>
	<div class="loading-overlay__spinner hidden">
	  <svg
		aria-hidden="true"
		focusable="false"
		class="spinner"
		viewBox="0 0 66 66"
		xmlns="http://www.w3.org/2000/svg"
	  >
		<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
	  </svg>
	</div>
</button>

[Dan-From-Ryviu]

Hi @PRETTYFRIDAYS 

Could you share your product page URL to check?

[PRETTYFRIDAYS]

yeah sure; https://e8aaa0-3.myshopify.com/products/volumizing-shampoo

password is mohwhi

[Dan-From-Ryviu]

Please go to Online store > Themes > Edit cod > open theme.liquid file, add this code before </body> tag and check if it work

<script>
document.addEventListener("DOMContentLoaded", function() {
    var stickyAddToCart = document.getElementById("ProductSubmitButton-Sticky");
    var originalAddToCart = document.getElementById("ProductSubmitButton-template--15921813061769__main");
    window.addEventListener("scroll", function() {
        if (window.scrollY > originalAddToCart.getBoundingClientRect().bottom) {
            stickyAddToCart.style.display = "block";
        } else {
            stickyAddToCart.style.display = "none";
        }
    });
});
</script>

[PRETTYFRIDAYS]

Hey, does not exactly work as planned, on page load it is visible, but then when you scroll down it gets invisible for like 3 seconds, and then it appears very fast even before the add to cart button is out of sight. If you have another code can you implement that it slides up? Thanks!

[Dan-From-Ryviu]

You can try to update code like this and check again

<script>
document.addEventListener("DOMContentLoaded", function() {
    var stickyAddToCart = document.getElementById("ProductSubmitButton-Sticky");
    var originalAddToCart = document.getElementById("ProductSubmitButton-template--15921813061769__main");
    window.addEventListener("scroll", function() {
        var rect = originalAddToCart.getBoundingClientRect();
        if (rect.bottom <= 0) {
            stickyAddToCart.style.display = "block";
        } else {
            stickyAddToCart.style.display = "none";
        }
    });
});
</script>

[PRETTYFRIDAYS]

Hey, now it does show after the customer scrolls past, but it still appears on page load, any way to fix that?

[Dan-From-Ryviu]

Code update and check

<script>
document.addEventListener("DOMContentLoaded", function() {
    var stickyAddToCart = document.getElementById("ProductSubmitButton-Sticky");
    var originalAddToCart = document.getElementById("ProductInfo-template--15921813029001__main");
    window.addEventListener("scroll", function() {
        if (window.scrollY > originalAddToCart.getBoundingClientRect().bottom) {
            stickyAddToCart.style.display = "block";
        } else {
            stickyAddToCart.style.display = "none";
        }
    });
});
</script>

[Dan-From-Ryviu]

Could I send a collaborator request to access your store so I can add code and check directly?

[PRETTYFRIDAYS]

Yeah ofcourse!

[Dan-From-Ryviu]

I sent request, please approve it

[PRETTYFRIDAYS]

Hey, sorry for the late reply, I added you as collaborator

[Dan-From-Ryviu]

Hi, I got it. Let me check

[Dan-From-Ryviu]

Hi, it's done. Please check now 

[PRETTYFRIDAYS]

Hey great! But can it also slide in up? Thanks for the help!

[PRETTYFRIDAYS]

Oh yeah and one more question, when I open another mega menu/drawer menu, it still shows, can that be on the background? This is the problem:

[Dan-From-Ryviu · Accepted solution]

Could you check again?

[PRETTYFRIDAYS]

Yes looks great! THANKS FOR YOUR HELP!

[Dan-From-Ryviu]

You are very welcome

[Meet_M]

Hey I've been following the whole thread. I'm glad you got it working. I'm trying to do the same can you please share the updated code with me here.

[Nasar1999]

Thank you so much! Your code was the key to helping me adjust it with ChatGPT. The code now works perfectly for me when scrolling 50%.

<!-- HTML -->
<button
id="ProductSubmitButton-Sticky"
type="submit"
name="add"
form="{{ 'product-form-' | append: section.id }}"
class="product-form__submit hidden"
>
<img src="https://www.svgrepo.com/show/61879/add-to-cart.svg" alt="Add to Cart Icon">
</button>

<!-- CSS -->
<style>
#ProductSubmitButton-Sticky {
position: fixed;
bottom: 320px; /* Adjust margin from the bottom */
right: 20px; /* Align to the right */
background: #edffa7; /* Background color with opacity */
z-index: 9999;
padding: 0; /* Remove padding, button size controlled by width/height */
border: 2px solid #000; /* Add border with desired color and thickness */
border-radius: 50%; /* Make the button circular */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Enhance shadow for better visibility */
width: 40px; /* Set width of the button */
height: 40px; /* Set height of the button */
display: flex; /* Align contents horizontally */
align-items: center; /* Vertically center contents */
justify-content: center; /* Horizontally center contents */
transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transitions for background and shadow */
cursor: pointer; /* Ensure the cursor shows as a pointer */
}

#ProductSubmitButton-Sticky img {
width: 21px; /* Set icon width */
}

#ProductSubmitButton-Sticky:hover {
background: #d4f6a5; /* Slightly darker background on hover */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
}

/* Ensure button is hidden initially */
.hidden {
display: none;
}
</style>

<!-- JavaScript -->
<script>
document.addEventListener("DOMContentLoaded", function() {
var button = document.getElementById("ProductSubmitButton-Sticky");

function updateButtonVisibility() {
var scrollPosition = window.scrollY || document.documentElement.scrollTop;
var documentHeight = document.documentElement.scrollHeight;
var windowHeight = window.innerHeight;
var scrollPercentage = (scrollPosition / (documentHeight - windowHeight)) * 100;

if (scrollPercentage > 50) {
button.classList.remove("hidden");
} else {
button.classList.add("hidden");
}
}

let isScrolling;
window.addEventListener('scroll', function() {
window.clearTimeout(isScrolling);
isScrolling = setTimeout(function() {
requestAnimationFrame(updateButtonVisibility);
}, 66); // Roughly 15fps for smoother updates
});

// Check visibility on page load in case already scrolled
updateButtonVisibility();
});
</script>