Show div on scroll (pixel amount) and animation problem

[ElliotM]

Hi there,

i have a custom buy button fixed on the bottom of the page on my product page.

I want to show the buy button when the page on mobile is scrolled 1200px from top.

My script is working, i added a animation fadein and fadeout, but the fadeout is not working.

Can anyone help me with this?

Website link (Look on mobile view): https://h1urnjbd20i0qkv4-61756834042.shopifypreview.com/collections/all-bonsai-trees/products/oubait... 

Thanks alot!

  
<div id="buyButton" class="bottomMenu hide">
<div class="promo-grid__container">

      
      <div class="hide-mobile-section">
 <div style="position:fixed; left:auto; right:auto; bottom:0; width:100vw; z-index:99999; margin-left:-16px;" class="product__submit" data-buttons-wrapper data-add-action-wrapper>
        <div data-add-action-errors class="add-action-errors"></div>

        {%- assign button_text = 'products.product.add_to_cart' | t -%}
        {%- if product.tags contains '_preorder' -%}
          {%- assign button_text =  'products.product.pre_order' | t -%}
        {%- endif -%}
        {%- unless current_variant.available -%}
          {%- assign button_text =  'products.product.sold_out' | t -%}
        {%- endunless -%}

        <div class="product__submit__buttons">
          <button
            type="submit"
            {% if enable_popup_trigger %} data-micromodal-close {% endif %}
            name="add"
            class="btn--outline btn--full btn--primary uppercase btn--add-to-cart"
            data-add-to-cart
            {% unless current_variant.available %} disabled="disabled" {% endunless %}>
            <span class="btn-state-ready">
              <span data-add-to-cart-text>
                {{ button_text }}
              </span>
            </span>

            <span class="btn-state-loading">
              <svg height="18" width="18" class="svg-loader">
                <circle r="7" cx="9" cy="9" />
                <circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
              </svg>
            </span>

            <span class="btn-state-complete">&nbsp;</span>
          </button>

          {%- if buybutton_setting -%}
            <div class="product__submit__quick">
              {{ form | payment_button }}
            </div> 
          {%- endif -%}
        </div>
      </div>
                </div>

  </div>
</div>

<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script id="rendered-js">
myID = document.getElementById("buyButton");

var myScrollFunc = function () {
  var y = window.scrollY;
  if (y >= 1200) {
     $('.bottomMenu').fadeIn(250);
    myID.className = "bottomMenu show";
  } else {
    myID.className = "bottomMenu hide";
    $('.bottomMenu').fadeOut(250);
  }
};

window.addEventListener("scroll", myScrollFunc);
//# sourceURL=pen.js
    </script>

<style type="text/css">
body {
    height: 2000px;
}
.bottomMenu  {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9999;
     -webkit-transition: all 100ms ease;
  transition: all 300ms ease;
}
.hide {
    opacity:0;
           -webkit-transition: all 100ms ease;
  transition: all 300ms ease;
   
}
.show {
    opacity:1;
           -webkit-transition: all 100ms ease;
  transition: all 300ms ease;
  
}
</style>