解决IOS下不支持fixed的问题
我们公司有一个页面底部用到了fixed样式，每当弹出键盘的时候，IOS下fixed就会走样(据我所知android没有该问题)。
为此之前我经过产品的同意做了简单的处理（方法1）。
方法一：
focus的时候让fixed块position变为relative，这是最简单的处理方法。
下面是我的小demo
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta http-equiv="pragma" content="no-cache" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" /> <style> * { padding: 0; margin: 0; } .input { margin:10px 10px 400px 10px; width: 200px; height: 30px; border: 1px solid #ccc; display: block; } .next { width: 100%; height: 44px; line-height: 44px; background: orangered; position: fixed; bottom:0; color:#fff; text-align: center; } .pos-rel { position: relative;; } </style> <script src="../js/zepto.js"></script> </head> <body> <section class="content"> <input class="input" type="text" /> <input class="input" type="text" /> <input class="input" type="text" /> <div class="next"> 下一步 </div> </section> <script> $(function() { var isIOS = (/iphone|ipad/gi).test(navigator.appVersion); if (isIOS) { $('.content').on('focus', 'input', function () { $('.next').addClass('pos-rel'); }).on('focusout', 'input', function () { $('.next').removeClass('pos-rel'); }); } }); </script> </body> </html>
方法二：
position：absolute；每次滚动的时候重新算位置。
下面是我的小demo，touch的时候作了隐藏处理，input focusout和window resize的时候作了fixed位置重新计算。
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta http-equiv="pragma" content="no-cache" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" /> <style> * { padding: 0; margin: 0; } .input { margin:10px 10px 400px 10px; width: 200px; height: 30px; border: 1px solid #ccc; display: block; } .next { width: 100%; height: 44px; line-height: 44px; background: orangered; position: absolute; color:#fff; text-align: center; } .pos-rel { position: relative;; } </style> <script src="../js/zepto.js"></script> </head> <body> <input class="input" type="text" /> <input class="input" type="text" /> <input class="input" type="text" /> <div class="next"> 下一步 </div> </body> <script> var isIOS = (/iphone|ipad/gi).test(navigator.appVersion); var likeFixed = function() { //解绑resize事件 以免进入死循环 $(window).unbind('resize', likeFixed); var t = document.documentElement.scrollTop || document.body.scrollTop, fixed_height = 44, top; //网页可见高度加上滚动条高度 - fixed元素的高度 top = window.innerHeight+ t - fixed_height; //设置fixed div的top $('.next').css({'top': top+'px' }); //重新绑定resize事件 setTimeout(function() { $(window).bind('resize', likeFixed); }, 10); } $(function() { if (isIOS) { likeFixed(); function touchstart(event) { $('.next').css('opacity',0); } function touchend(event) { $('.next').css('opacity',1); } //touch的时候隐藏 document.addEventListener("touchstart", touchstart, false); //滚动后重新设置fixed div的位置 window.onscroll = likeFixed; //touch后显示 document.addEventListener("touchend", touchend, false); } //所有input blur时重新计算位置，兼容chrome $('body').on('focusout', 'input', likeFixed); }); </script> </html>
以上是我的处理方法，也许存在不足之处，欢迎大家提出宝贵意见，一起交流。
