How to trigger sticky add-to-cart after scrolling 20% to 30%?

[Alexandrow]

How can I make the add-to-cart sticky appear after a 20% or 30% scroll down? Thank in advice!

{% if template contains 'product' %}
<div id="huratips-addtocart-sticky">
  <form action="/cart/add" method="post">
    <select name="id">
      {% for variant in product.variants %}
      <option value="{{variant.id}}">{{variant.title}}</option>
      {% endfor %}
    </select>
    <input type="number" name="quantity" value="1" min="1">
    <button type="submit">Add To Cart</button>
  </form>
</div>
<style>
  #huratips-addtocart-sticky{
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    padding-top: 5px;
    border-top: 1px solid #e2e2e2;
  }
  #huratips-addtocart-sticky select,
  #huratips-addtocart-sticky input,
  #huratips-addtocart-sticky button{
    height:40px;
    margin:0 5px;
    vertical-align: middle;
  }
  #huratips-addtocart-sticky input{
    width: 60px;
    text-align: center;
  }
  #huratips-addtocart-sticky button{
    padding:0 10px;
  }
  #huratips-addtocart-sticky button {
    background: green;
    border: none;
    color: white;
}
</style>
{% endif %}

[Dan-From-Ryviu · Accepted solution]

You can try to use this code instead of.

{% if template contains 'product' %}
<script>
$(window).scroll(function(){
    if ($(this).scrollTop() > 500) {
       $('#huratips-addtocart-sticky').addClass('stick');
    } else {
       $('#huratips-addtocart-sticky').removeClass('stick');
    }
});
</script>
<div id="huratips-addtocart-sticky">
  <form action="/cart/add" method="post">
    <select name="id">
      {% for variant in product.variants %}
      <option value="{{variant.id}}">{{variant.title}}</option>
      {% endfor %}
    </select>
    <input type="number" name="quantity" value="1" min="1">
    <button type="submit">Add To Cart</button>
  </form>
</div>
<style>
  #huratips-addtocart-sticky.stick{
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    padding-top: 5px;
    border-top: 1px solid #e2e2e2;
  }
  #huratips-addtocart-sticky select,
  #huratips-addtocart-sticky input,
  #huratips-addtocart-sticky button{
    height:40px;
    margin:0 5px;
    vertical-align: middle;
  }
  #huratips-addtocart-sticky input{
    width: 60px;
    text-align: center;
  }
  #huratips-addtocart-sticky button{
    padding:0 10px;
  }
  #huratips-addtocart-sticky button {
    background: green;
    border: none;
    color: white;
}
</style>
{% endif %}

If it is not working, please add this addition code above <script> tag 

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

[Alexandrow]

It's working perfectly! Thank you!