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') 为页面底部的导航栏

posted @ 2014-07-31 14:53  tww316  阅读(473)  评论(0编辑  收藏  举报