Use  fixed on mobile could cause wrong position for unknown reason. Change value of “position” property should be the best solution.

<div class="quick_menu">
  <a href="#" class="checkout">Checkout</a>
</div>

.quick_menu{
    display: none;
    a{
        display: block;

    }
}

@media (max-width: 600px){
    .quick_menu{
        display: block;
        position: fixed;
        top: auto;
        bottom: 0;
        height: 50px;
        width: 100%;
        background-color: $main-color;
        color: #FFF;
        z-index: 6;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        a{
            color: #FFF;
        }
    }
}

$(window).load(function(){
    $(window).scroll(function (event) {
        var scroll = $(window).scrollTop();
        //console.log(scroll);
        var gap = scroll - start_moving;
        if(gap > 0){
            $q_menu.css({
                'position': 'relative'
            });
        }else{
            $q_menu.css({
                'position': 'fixed'
            });
        }
    });
});

//Height of document will be changed after main products are retrived.
function refresh_scroll(){
    var w_h = $(window).height();
    var d_h = $(document).height();
    var footer_h = $('footer').outerHeight();
    $q_menu = $('.quick_menu');
    start_moving = d_h - w_h - footer_h;
}

function get_main_products(gid){
    var params = {
        gid:gid
    }
 
    $.ajax({
        type: 'get',
        url: '/menu/main_products',
        data: params,
        dataType: 'html',
        success: function(res){
            $('#main_products').html(res);

            $('.dish_wrap .img_wrap').fancybox({
                // Options will go here
            });

            refresh_scroll();
        },
        error: function(res){
            $('#iform').lalavalidate('show_errors', res);
        }
    });
}