Use fixed on mobile could cause wrong position for unknown reason. Change value of “position” property should be the best solution.
|
1 2 3 |
<div class="quick_menu"> <a href="#" class="checkout">Checkout</a> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.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; } } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
$(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); } }); } |