直接上代码：

$(document).ready(function () {
　　var u = navigator.userAgent;
　　var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
　　var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
　　var h=$(window).height(); //获取窗口高度
　　$(window).resize(function() {     //检测窗口高度变化
　　if($(window).height()<h){    //判断
　　　　$('#footer').hide();
　　}
　　if($(window).height()>=h){
　　　　if(isAndroid){
　　　　$('#footer').show();
　　　　$("input").blur();
　　}else if(isiOS){

　　　　$('#footer').show();
　　}
}

});
});

---------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/>

<title>解决ios 微信 input 获取焦点时fixed失效 | 方法1 -幸凡学习网</title>

<style>

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;vertical-align:baseline;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

body,html{color:#333;}

html{font-size:20px;}

h1,h2,h3,h4,h5,h6,h7{font-size:16px;font-weight:normal;}

b{font-weight:normal;}

ol,ul{list-style:none;}

blockquote,q{quotes:none;}

blockquote:before,blockquote:after,q:before,q:after{content:''content:none;}

input,textarea{outline:0;resize:none;padding:0;}

body,html,input,textarea,select{font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;}

select{appearance:none;-moz-appearance:none; /* Firefox */-webkit-appearance:none; /* Safari 和 Chrome */font-size:14px;background:url(../images/arrow_dowm2_ico.png) no-repeat right center;background-size:18px auto;}

i,em,b{font-style:normal;font-weight:normal;}

body{background:#eee;font-size:0.7rem;}

.clearfix:after{content:'.'height:0;display:block;clear:both;visibility:hidden;}

.clearfix{*zoom:1;}

a,a:hover,a:active,a:visited{text-decoration:none;color:#333;}

.header{position:fixed;height:40px;line-height:40px;padding:10px 0;left:0;top:0;width:100%;background:#fff;z-index:3;}

.header .search_txt{margin-left:10px;margin-right:90px;border:1px solid #e6e6e6;padding:0 10px;background:#fafafa;}

.header .search_txt input{width:100%;border:none;height:38px;line-height:38px;background:none;}

.header .search_submit{position:absolute;right:10px;top:10px;width:70px;height:40px;}

.header .search_submit input{height:40px;width:70px;border:none;background:#f60;color:#fff;}

.h60{display:block;height:60px;}

.item{margin-top:10px;}

.item p{height:40px;line-height:40px;padding:0 10px;border-bottom:1px solid #e6e6e6;background:#fff;}

</style>

</head>

<body>

<!-- 防止重叠-->

<div class="h60"></div>

<!-- 置顶搜索框 -->

<div class="header">

    <div class="search_txt"><input type="text" placeholder="请输入你要搜索的内容" /></div>

    <div class="search_submit"><input type="submit" value="搜索" /></div>

</div>

<!-- 数据容器 -->

<div class="item">

</div>

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<script>

var scrollh=0;//保存滚动条的位置

$(function(){

    //填充数据

    var itemhtml="";

    for(var i=0;i<50;i++)

    {

        itemhtml+="<p>我是第"+  parseInt(i+1)+"条数据</p>";

    }

    $(".item").html(itemhtml);

    //判断是ios终端 才执行这个下面的FIXED

    var u = navigator.userAgent;

    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

    if(isiOS)

    {

        $(".header .search_txt input").focus(function(e){

            $(".header").css({"position":"relative","margin-top":"-60px"});

            scrollh=$(window).scrollTop();

            $("body").scrollTop(0);

            $("body").css("overflow","hidden");

            $('body').bind("touchmove",function(e){

              e.preventDefault();

            });

        });

        $(".header .search_txt input").blur(function(e){

            $(".header").removeAttr("style");

            $("body").css("overflow","auto");

            $('body').bind("touchmove",function(e){

                $("body").unbind("touchmove");

            });

            $("body").scrollTop(scrollh);

        });

    }

});

 </script>

</body>

</html>

---------------------第二种------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/>

<title>解决ios 微信 input 获取焦点时fixed失效 | 方法2 -幸凡学习网</title>

<style>

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;vertical-align:baseline;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

body,html{color:#333;}

html{font-size:20px;}

h1,h2,h3,h4,h5,h6,h7{font-size:16px;font-weight:normal;}

b{font-weight:normal;}

ol,ul{list-style:none;}

blockquote,q{quotes:none;}

blockquote:before,blockquote:after,q:before,q:after{content:''content:none;}

input,textarea{outline:0;resize:none;padding:0;}

body,html,input,textarea,select{font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;}

select{appearance:none;-moz-appearance:none; /* Firefox */-webkit-appearance:none; /* Safari 和 Chrome */font-size:14px;background:url(../images/arrow_dowm2_ico.png) no-repeat right center;background-size:18px auto;}

i,em,b{font-style:normal;font-weight:normal;}

body{background:#eee;font-size:0.7rem;}

.clearfix:after{content:'.'height:0;display:block;clear:both;visibility:hidden;}

.clearfix{*zoom:1;}

a,a:hover,a:active,a:visited{text-decoration:none;color:#333;}

.header{position:fixed;height:40px;line-height:40px;padding:10px 0;left:0;top:0;width:100%;background:#fff;z-index:3;}

.header .search_txt{margin-left:10px;margin-right:90px;border:1px solid #e6e6e6;padding:0 10px;background:#fafafa;}

.header .search_txt input{width:100%;border:none;height:38px;line-height:38px;background:none;}

.header .search_submit{position:absolute;right:10px;top:10px;width:70px;height:40px;}

.header .search_submit input{height:40px;width:70px;border:none;background:#f60;color:#fff;}

.item{position:absolute;top:70px;left:0;right:0;bottom:0;

    /* 使之可以滚动 */

    overflow-y: scroll;

    /* 增加该属性，可以增加弹性 */

    -webkit-overflow-scrolling: touch;

}

.item p{height:40px;line-height:40px;padding:0 10px;border-bottom:1px solid #e6e6e6;background:#fff;}

</style>

</head>

<body>

<!-- 置顶搜索框 -->

<div class="header">

    <div class="search_txt"><input type="text" placeholder="请输入你要搜索的内容" /></div>

    <div class="search_submit"><input type="submit" value="搜索" /></div>

</div>

<!-- 数据容器 -->

<div class="item">

</div>

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<script>

var scrollh=0;//保存滚动条的位置

$(function(){

    //填充数据

    var itemhtml="";

    for(var i=0;i<50;i++)

    {

        itemhtml+="<p>我是第"+  parseInt(i+1)+"条数据</p>";

    }

    $(".item").html(itemhtml);

});

 </script>

</body>

</html>

解决移动端 footer fixd 定位被键盘顶起来的方案的更多相关文章

  1. h5移动端常见虚拟键盘顶起底部导航栏解决办法

    在h5移动端开发中相信很多朋友跟我一样都会遇到页面底部导航被虚拟键盘顶起的问题,自己在网上找到的解决办法拿出来与大家分享,有不完美之处还望见谅,有更好的解决办法可以贴出来大家一起互相学习!! var ...

  2. 关于苹果手机微信端 position: fixed定位top导航栏问题

    在移动端,position: fixed定位一般不被识别,或者在ios系统中,获取input焦点时,会导致position: fixed的top失效,下面是我验证过的方法,大家可以试试.<!do ...

  3. 修改CKplayer.js 源码解决移动端浏览器全屏不能限制快进的问题

    原文地址:https://www.cnblogs.com/jying/p/9642445.html,转载请说明出处. 最近项目需要播放视频且限制未观看部分的快进功能,找了两款js插件ckplayer和 ...

  4. 移动端 fixed 固定按钮在屏幕下方，然后按钮被键盘顶上来...顶上来了有没有~

    在移动端 H5 页面开发中,我使用了 fixed 固定某个元素在屏幕的最下方, 这时点击输入框,接着非常非常自然地出现了元素被系统键盘顶起来的情况,如下图. 解决方案: 首先,给页面最外层包裹一层 d ...

  5. 7种方法解决移动端Retina屏幕1px边框问题

    在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...

  6. touch-action 解决移动端300ms延迟问题

    CSS3 新属性, touch-action: manipulation; 可以有效的解决移动端300ms延迟的问题 移动端300ms延迟问题一直都是h5APP的痛点, 有很多库或者方法都可以解决, ...

  7. fastclick.js解决移动端（ipad）点击事件反应慢问题

    参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...

  8. h5解决移动端上滑卡顿问题

    select{ -webkit-overflow-scrolling: touch;/*解决移动端滑动卡顿问题*/ -webkit-transform: translateZ(0px);/*开启GPU ...

  9. 解决移动端页面滚动后不触发touchend事件

    解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...

随机推荐

  1. Linux服务器 /var/spool/clientmqueue 目录下产生大量文件的删除办法

    检查linux发现server中的磁盘分区空间超过98%,登录到服务器查看 [root@localhost etc]# df -hFilesystem 容量 已用 可用 已用% 挂载点/dev/hda ...

  2. 第二次PHP面试题

    昨天下午翘班去参加了人生中第二次PHP面试.是一家相对第一家更加专业的互联网公司.效果不如第一家理想,笔试题有点难,而且偏高理论,面试时面试官也还不错,一起探讨,可是他的问题我还是很多都不知道,果然是 ...

  3. kentico7中设置site的default page

    在SiteManager中,Settings中,选择好站点,然后Content,Default alias path

  4. POJ 2080:Calendar

    Calendar Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 12546   Accepted: 4547 Descrip ...

  5. 【Dairy】2016.10.17-1 OIer最悲剧的事情

    OIer最悲剧的事情: 看完题,觉得很可做 然后开始码,码了很久                                       一测样例,不过.. 开始肉眼查错..手玩样例.. 过了很久 ...

  6. BSGS算法及拓展

    https://www.zybuluo.com/ysner/note/1299836 定义 一种用来求解高次同余方程的算法. 一般问题形式:求使得\(y^x\equiv z(mod\ p)\)的最小非 ...

  7. 洛谷 P1573 栈的操作

    题目描述 现在有四个栈,其中前三个为空,第四个栈从栈顶到栈底分别为1,2,3,-,n.每一个栈只支持一种操作:弹出并压入.它指的是把其中一个栈A的栈顶元素x弹出,并马上压入任意一个栈B中.但是这样的操 ...

  8. bzoj 1577: [Usaco2009 Feb]庙会捷运Fair Shuttle【贪心+线段树】

    按结束时间排序,然后开个线段树,按照排序后的牛群贪心的选 贪心的依据是选哪头牛都是选,不如给后面的多省一点空间 #include<iostream> #include<cstdio& ...

  9. vue开发环境和生产环境里面解决跨域的几种方法

    什么是跨域   跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu. ...

  10. [Qt Creator 快速入门] 第8章 界面外观

    一个完善的应用程序不仅应该有实用的功能,还要有一个漂亮的外观,这样才能使应用程序更加友好,更加吸引用户.作为一个跨平台的UI开发框架,Qt提供了强大而灵活的界面外观设计机制.这一章将学习在Qt中设计应 ...