How can I add a scroll function to my sticky add to cart bar?

[Grace_01]

I have sticky add to cart bar and want to scroll function to it. Need help to add below js code like where to add in global.js to get exact scroll function so that sticky add to cart bar will only appear after scroll. Using shopify 2.0 dawn theme.

Store Link

$(window).scroll(function (event) {
    var height = $(window).height();
    var scroll = $(window).scrollTop();
    //console.log(scroll + " " + height);
    if(scroll > height){
     $(".sticky_cart").addClass("show");
    } else {
     $(".sticky_cart").removeClass("show");
    }
  });
  
  $("#btn-sticky-cart").click(function(){
  	$(".paymentButtonsWrapper #AddToCart").click();
  });

[Ahsan_ANC]

you should put this code at the very bottom of your gobal.js file. So it will be handy to find and change it later.

[Grace_01]

@Ahsan_ANC I have added but it's not working

[Ahsan_ANC]

where you have added the code. there is not code in your theme global.js file

https://cdn.shopify.com/s/files/1/0337/3737/5879/t/37/assets/global.js

[Grace_01]

@Ahsan_ANC Added again

[Ahsan_ANC]

plz also add jquery to your theme 

[Ahsan_ANC · Accepted solution]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

[Grace_01]

@Ahsan_ANC Thanks, working prefect now

[Ahsan_ANC]

that's nice!

one more thing the product image overlaps the bar plz add the following code at the bottom of "base.css"

.sticky_cart{
    z-index: 99999;
}

[Grace_01]

@Ahsan_ANC but after this code whatsapp button overlapped now

[Ahsan_ANC]

plz replace 99999 with just 99

and also one more thing

.sticky_cart{
z-index: 99;
padding-right: 110px;
}

[Grace_01]

@Ahsan_ANC Now it's prefect aligned, Thanks again 

[Ahsan_ANC]

plz share the store URL.

[Ugurcan]

We now offer a sticky cart solution with a free plan. It works with all themes, check it out: https://apps.shopify.com/pasilobus-sticky-cart

[MRamzan]

Here is the solution to add sticky add to cart bar in your store: