问题:

  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. JSP内置对象---application

    application 对象   服务器启动后,就产生了application 对象.当一个客户访问服务器上的一个JSP 页面时,JSP 引擎为该客户分配这个application 对象,  当客户在 ...

  2. nginx根据条件跳转+跳转规则

    好的参考博文: nginx rewrite规则 自己写的时候参考这两个 Nginx 伪静态Rewrite,重定向Location配置总结(转) nginx rewrite规则语法 一.输入子目录跳转 ...

  3. 面向对象程序设计-C++ Stream & Template & Exception【第十五次上课笔记】

    这是本门<面向对象程序设计>课最后一次上课,刚好上完了这本<Thinking in C++> :) 这节课首先讲了流 Stream 的概念 平时我们主要用的是(1)在屏幕上输入 ...

  4. U-Boot在FL2440上移植(二)----支持NOR Flash

    <一>选择NOR flash型号 我的开发板上的nor flash芯片是Intel的JS28F320(4MB)(1device=32blocks,1block=128MB fl2440默认 ...

  5. java:字符串的“+”运算

    今天在一篇博客里,意外的看到了一段关于java中对字符串的“+”运算的处理(博客原文:http://blog.csdn.net/yirentianran/article/details/2871417 ...

  6. GridView用法的修改和删除

    (前台) <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="Fa ...

  7. Java学习笔记51:数组转ArrayList和ArrayList转数组技巧

    ArrayList转数组: public class Test { public static void main(String[] args) { List<String> list = ...

  8. MFC技术内幕系列之(四)---MFC消息映射与消息传递内幕

    ////////////////////////////////////////////////////////////////////////////////////                 ...

  9. 探索Android中的Parcel机制(上)

    一.先从Serialize说起 我们都知道JAVA中的Serialize机制,译成串行化.序列化……,其作用是能将数据对象存入字节流其中,在须要时又一次生成对象.主要应用是利用外部存储设备保存对象状态 ...

  10. js php xmlrequest 上传图片

    本来想用插件上传图片的,后来自己写了一个简单的js实现异步的图片上传,不多说上代码很easy upload.php <?php if(isset($_FILES["myfile&quo ...