问题:

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

IOS系统对fixed定位支持不好的解决方法的更多相关文章

  1. iOS出现<object returned empty description>的解决方法

    iOS出现<object returned empty description>的解决方法: 使用  [str length] <= 0  判断处理

  2. 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法--(转)

    如有雷同,不胜荣幸,若转载,请注明 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了boot ...

  3. 转载------让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

    本文是转载及收藏 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在c ...

  4. ADF控件ID变化引发JS无法定位控件的解决方法

    原文地址:ADF控件ID变化引发JS无法定位控件的解决方法作者:Nicholas JSFF定义的控件ID到了客户端时往往会改变.例如在JSFF中的一个的ID为"ot1",但是当这个 ...

  5. win7 创建vhd提示“找不到指定文件的虚拟磁盘支持提供程序”解决方法

    本文参照:https://itbbs.pconline.com.cn/diy/16509116_2.html 14楼中"坚持不放弃"用户的答案得到解决 问题复现: 1.window ...

  6. bootstrap支持ie8 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

    做一个在线系统,PC端也要做,但要兼容千恶的IE8[IE6 是万恶,打死我都不会管IE6],IE8 是我底线了md, 在IE8下 bottstrap 错乱,变形,不支持一些属性的问题,下面看了一篇 某 ...

  7. 苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法

    在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩.如: .fixedDiv { position: fixed; t ...

  8. Android 10不能使用uiautomatorviewer定位元素的终极解决方法

    Android app 元素定位除了使用Appium Inspector 外,还可以使用Android SDK 里tools中的uiautomatorviewer 工具.但今天打算使用 uiautom ...

  9. 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

    首先需要确保你的HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响:对标记attributes .propertie ...

随机推荐

  1. WEB ICON 的探讨

    一般考虑到webicon 就是cssSprite和自定义font:本文基于下述而总结和进行分析,如有笔误有望指出,谢谢 在线教程:用字体在网页中画ICON图标 http://www.imooc.com ...

  2. ZigBee研究之旅(二)

    在学习ZigBee设备CC2530模块时,编程后程序无法运行,但又十分确定程序的真确性的情况下,看看是不是project栏下的option选项配置的有问题,我是经常在这里出问题,一开始找不到原因,特此 ...

  3. jQuery遍历table

    1. $("table").find("tr").each(function(){ $(this).find("td").each(func ...

  4. ftp上传错误

    明明设置好了权限,但是在上传的时候提示如下错误,但在使用的过程当中,发现有的时候是可以上传的,很奇怪的问题. baidu 了一下,发现是下面的这个设置导致的.改过来后,果然正常. 这个设置只是一个字符 ...

  5. ThinkPHP - I 函数

    ThinkPHP函数详解:I方法   浏览:144722 发布日期:2013/06/01 分类:文档教程 关键字: 函数 ThinkPHP的I方法是3.1.3版本新增的,如果你是之前的3.*版本的话, ...

  6. BZOJ 2843: 极地旅行社( LCT )

    LCT.. ------------------------------------------------------------------------ #include<cstdio> ...

  7. jquery的slideUp、slideDown、slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug

    jquery的slideUp.slideDown.slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug: 1. 因position引起的问题 影响:IE全系列 症状:在需要sl ...

  8. pChart图表插件使用

    <?php /* 柱形图 */ #引入库文件 include("../class/pData.class.php"); include("../class/pDra ...

  9. 建立Go工作环境

    最近在折腾Go语言,找了个开源项目nsq研究源代码.不过前两天不小心把系统搞挂了,这次又要重做一遍,记录一下,备忘. 准备: 1. vim+golang插件+ctags(新版本支持Go) 2. Go1 ...

  10. Git学习笔记总结和注意事项

    一.Git简单介绍 Git是眼下世界上最先进的分布式版本号控制系统.其特点简单来说就是:高端大气上档次! 二.Windows上Git安装 最早Git是在Linux上开发的.非常长一段时间内.Git也仅 ...