解决移动端 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事件. ...
随机推荐
- struts2开发中一些概念的理解
对象关系映射(orm)中的两个概念 VO 和 PO: 它们都包含一些属性及这些属性的get/set方法 1.VO:是值对象,可以理解为业务对象,存活在业务层,供业务逻辑使用,当前业务逻辑需要一组什么数 ...
- python的一些常用函数
1 filter(function, iterable) 等价于(item for item in iterable if function(item)) 就是说,filter会遍历iterable中 ...
- Web框架 - 开源软件库 - 开源中国社区
网址:http://www.oschina.net/project/tag/127?lang=194
- Hadoop安装配置(ubuntu-12.04.2-server-amd64)
环境如下: ubuntu-12.04.2-server-amd64 hadoop-1.0.4 VirtualBox 1.在VBox中安装Ubuntu Server,用户名和密码都是hadoop,安装完 ...
- hdnoip2017
T1: 小喵喵有 n 个小鱼干排成一列,其中第 i个小鱼干有两种属性,美味度 ai 和特殊度 bi 现在小喵喵要吃掉一些小鱼干,出于一些原因,小喵喵会吃掉连续的一段区间中的所有小鱼干. 如果吃掉了 [ ...
- 【JSOI 2011】 分特产
[题目链接] 点击打开链接 [算法] 考虑求每个人可以不分的方案 那么,对于每件物品,我们把它分成n份,每一份对应分给每一个人,有C(a[i]+n-1,m-1)种方案,而总方案数就是每种 物品方案数的 ...
- 使用vue-cli启动项目出错
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据 ...
- SQL 增加, 删除父子级带事务的存储过程
if (object_id('proc_DeleteFile', 'P') is not null) drop proc proc_DeleteFile gocreate PROCEDURE ...
- centos 安装sysbench
安装sysbench 下载并且解压 shell> wget https://github.com/akopytov/sysbench/archive/1.0.zip -O "sysbe ...
- 拦截机制中Aspect、ControllerAdvice、Interceptor、Fliter之间的区别详解
Spring中的拦截机制,如果出现异常的话,异常的顺序是从里面到外面一步一步的进行处理,如果到了最外层都没有进行处理的话,就会由tomcat容器抛出异常. 1.过滤器:Filter :可以获得Http ...