解决移动端 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事件. ...
随机推荐
- JBOSS和EJB学习一
1.使用软件 IDE:Eclipse4.3(开普勒) EE版本 服务器:jboss EAP 6.2 eclipse-jboss plugin:jbosstools-Update-4.1.2.Final ...
- [RK3288][Android6.0] 调试笔记 --- 录音音量从HAL到APP层会变小问题【转】
本文转载自:http://blog.csdn.net/kris_fei/article/details/72783843?locationNum=9&fps=1 Platform: Rockc ...
- git 配置代理
1.目的:配置proxy,使得git可以克隆github上的代码 2.方法:执行下面三条命令,配置下git的代理 git config --global https.proxy https://w00 ...
- Ｄinic(模板 再错是不可能的 这辈子都不可能了）
#include<iostream> #include<cstdio> #include<cmath> #include<cstring> #inclu ...
- 并不对劲的spoj nsubstr
题意是求一个字符串每个长度的子串出现次数最多的那个出现了多少次,也就是求每个到根的最长路的right集合最大值 . 先建后缀自动机,然后将每个前缀所在的集合的初值设为1,因为所有前缀的right集合肯 ...
- Postgresql的一些命令
显示所有数据表: \dt 显示表结构: \d YOUR_TABLE 进入数据库: psql DATABASE_NAME 显示所有数据库: \list 退出: \q 删除数据库: dropdb DAT ...
- sql2000数据库置疑造成的原因以及如何解决置疑
造成数据库置疑一般有以下几点: 1)电脑非法关机或者意外停电: 2)磁盘有坏道或者损坏: 3)数据库感染病毒,日志文件损坏: 4)非正常情况下移动数据库文件 5)系统,硬盘,经常强制性关机(如断电)类 ...
- bzoj 1034: [ZJOI2008]泡泡堂BNB【贪心】
是贪心 先把两个数组排序,然后贪心的选让a数组占优的(如果没有就算输),这是最大值,最小值是2n-贪心选b数组占优 #include<iostream> #include<cstdi ...
- SQL Server触发器创建、删除、修改、查看示例步骤
一﹕ 触发器是一种特殊的存储过程﹐它不能被显式地调用﹐而是在往表中插入记录﹑更新记录或者删除记录时被自动地激活.所以触发器可以用来实现对表实施复杂的完整性约`束. 二﹕ SQL Server为每个触发 ...
- 【题解】TES-Intelligence Test
[题解]\(TES-Intelligence\) \(Test\) 逼自己每天一道模拟题 传送:\(TES-Intelligence\) \(Test\) \([POI2010]\) \([P3500 ...