解决移动端 footer fixd 定位被键盘顶起来的方案
直接上代码：
$(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 定位被键盘顶起来的方案的更多相关文章
- h5移动端常见虚拟键盘顶起底部导航栏解决办法
在h5移动端开发中相信很多朋友跟我一样都会遇到页面底部导航被虚拟键盘顶起的问题,自己在网上找到的解决办法拿出来与大家分享,有不完美之处还望见谅,有更好的解决办法可以贴出来大家一起互相学习!! var ...
- 关于苹果手机微信端 position: fixed定位top导航栏问题
在移动端,position: fixed定位一般不被识别,或者在ios系统中,获取input焦点时,会导致position: fixed的top失效,下面是我验证过的方法,大家可以试试.<!do ...
- 修改CKplayer.js 源码解决移动端浏览器全屏不能限制快进的问题
原文地址:https://www.cnblogs.com/jying/p/9642445.html,转载请说明出处. 最近项目需要播放视频且限制未观看部分的快进功能,找了两款js插件ckplayer和 ...
- 移动端 fixed 固定按钮在屏幕下方，然后按钮被键盘顶上来...顶上来了有没有~
在移动端 H5 页面开发中,我使用了 fixed 固定某个元素在屏幕的最下方, 这时点击输入框,接着非常非常自然地出现了元素被系统键盘顶起来的情况,如下图. 解决方案: 首先,给页面最外层包裹一层 d ...
- 7种方法解决移动端Retina屏幕1px边框问题
在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...
- touch-action 解决移动端300ms延迟问题
CSS3 新属性, touch-action: manipulation; 可以有效的解决移动端300ms延迟的问题 移动端300ms延迟问题一直都是h5APP的痛点, 有很多库或者方法都可以解决, ...
- fastclick.js解决移动端（ipad）点击事件反应慢问题
参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...
- h5解决移动端上滑卡顿问题
select{ -webkit-overflow-scrolling: touch;/*解决移动端滑动卡顿问题*/ -webkit-transform: translateZ(0px);/*开启GPU ...
- 解决移动端页面滚动后不触发touchend事件
解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...
随机推荐
- SSDP 抓包
简单服务发现协议(SSDP,Simple Service Discovery Protocol)
- linux CentOS中创建用户 无密码登录
首先点击左上角的 “应用程序” -> “系统工具” -> “终端”,首先在终端中输入 su ,按回车,输入 root 密码以 root 用户登录,接着执行命令创建新用户 hadoop: 接 ...
- 就是这个foxmail有时出现记事同步不了
昨天和妈妈商量还是要打算再次买一块正版电池,虽然她现在有点不情愿,但是过一个月再说,然后就是他的号码超出流量6M,由于是2G的流量,按照每M是一元,所以就是扣了6元,然后他的套餐里面显示还有94M也不 ...
- 简述Python中的break和continue的区别
众所周知在Python中,break是结束整个循环体,而continue则是结束本次循环再继续循环. 但是作为一个新手的你,还是不明白它们的区别,这里用一个生动的例子说明它们的区别,如下: 1.con ...
- nginx配置改变默认访问路径
在安装完nginx服务后,url访问的默认路径是安装的路径html文件夹下的内容,如果需要指定自定义的路径,需要配置nginx.conf文件内容,这样通过url访问就可以了,比如: http://12 ...
- samba - linux客户端访问samba服务器的指令（转载）
转自:http://linux.sheup.com/linux/linux5303.htm linux客户端访问samba服务器的指令2004-04-23 15:18 pm来自:Linux文档现载:W ...
- MySQL5.7 windows二进制安装
200 ? "200px" : this.width)!important;} --> 介绍 1.下载解压 下载地址:http://dev.mysql.com/get/Dow ...
- bzoj 1576: [Usaco2009 Jan]安全路经Travel【spfa+树链剖分+线段树】
这几天写USACO水题脑子锈住了--上来就贪心,一交就WA 事实上这个是一个叫最短路树的东西,因为能保证只有一条最短路,所以所有最短路合起来是一棵以1为根的树,并且在这棵树上,每个点被精灵占据的路是它 ...
- 为什么要用Go语言做后端
FMZ数字货币量化平台 www.fmz.com, 后端使用Go语言,这里是创始人Zero谈论使用Go语言所带了的便利.原帖地址:https://www.zhihu.com/question/27172 ...
- python自动化测试学习笔记-10YAML
之前学习的编写测试用例的方法,都是从excel中编写接口的测试用例,然后通过读取excel文件进行接口自动化测试,这种方式我们叫做数据驱动的方式,由于excel操作起来不灵活,无法实现关联关系的接口测 ...