问题:

  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. .net MVC 使用 JSON JavaScriptSerializer 进行序列化或反序列化时出错,字符串的长度超过了为 maxJsonLength 属性设置的值

    在.net mvc的controller中,方法返回JsonResult,一般我们这么写: [HttpPost] public JsonResult QueryFeature(string url, ...

  2. APNs原理解析

    什么是APNs 先说一下远程推送,一般我们有自己的服务器,在这个过程中是Provider的角色,如图,推送从我们的服务器到我们的APP的过程就是要通过APNs来发送 APNs(Apple Push N ...

  3. kinect for windows - DepthBasics-D2D详解之二

    通过上篇文章,我们了解了在视频图像从kinect开发包传输到应用程序之前的一系列初始化工作,那么这篇文章主要来叙述,如何将一帧图像数据获取到,并显示出来的. 更新窗口是在Run函数消息处理中,当Kin ...

  4. Java中static、final用法

    一.final 1.final变量: 当你在类中定义变量时,在其前面加上final关键字,那便是说,这个变量一旦被初始化便不可改变,这里不可改变的意思对基本类型来说是其值不可变,而对于对象变量来说其引 ...

  5. idea 使用问题总结

    tomcat     edit configurations配置问题:         在deployment选项卡内增加artifact到server,在Application context选择应 ...

  6. gdal库的三个使用心得

    作者:朱金灿 来源:http://blog.csdn.net/clever101 最近使用gdal库比较多,就谈谈gdal库的一些使用心得. 第一个是GDALOpen的访问权限参数会影响图像的创建金字 ...

  7. 竖向折叠二级导航JS代码(可防刷新ul/li结构)

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    ...

  8. linux 工具: Top

    linux TOP命令各参数详解[转载] http://www.cnblogs.com/sbaicl/articles/2752068.html

  9. mvc导航配置(View页面)

    @using Seyoit.Website.Config@using Seyoit.Website.Config.Navigation@{ var action = ViewContext.Route ...

  10. springmvc-3.2-jsr303解决服务端验证问题

    从以前的验证:Stringutils.isEmpty....到struts的验证:xxxvalidate 现在使用jsr303使之更加简单  依赖hibernate-validator-4.xx.ja ...