IOS系统对fixed定位支持不好的解决方法
问题:
IOS 中所有浏览器,当页面上的输入框获得焦点时,呼出键盘。
页面底部的导航栏(position:fixed)会被键盘顶到页面的中间。
而当输入框失去焦点时,导航栏停留在页面中间,造成页面错乱。
原因:
IOS系统,对position:fixed支持不好。
解决:
输入框失去焦点时,让页面滚动1px。
代码:
$(function(){ // 输入框事件绑定 $('input').on('focus', function () { setTimeout(function () { $('#panel_nav').css('position', 'static'); }, 100); }).on('blur', function () { setTimeout(function () { $('#panel_nav').css('position', 'fixed'); // 让滚动条滚动1次 window.scroll(0, $(window).scrollTop() + 1); }, 100); }); });
$('#panel_nav') 为页面底部的导航栏