移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现。但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题。如图:
如何解决:
查阅资料之后想到一下几种解决方法
1,使用position:absolute模拟
<script type="text/javascript">
window.onscroll=function(){
$(".fixed").css("top",$(window).scrollTop());
$(".foot").css("top",$(window).scrollTop()+$(window).height());
}
</script>
问题来了:滑动页面时头部底部div会有明显的抖动。
2,判断当前获得焦点元素是input则隐藏div改为position:absolute
<body onload=setInterval("a()",500)>
<script type="text/javascript">
function a(){
if(document.activeElement.tagName == 'INPUT'){
$(".fixed").css({'position': 'absolute','top':'0'});
} else {
$(".fixed").css('position', 'fixed');
}
}
</script>
问题来了:不停监控dom,消耗资源。如果input个数较少,可在input里面添加onfocus事件好一些。但是如果是底部固定div此方法好像不太给力。
3,插件iscroll.js个人感觉不是很好用。可能方法不对,jQuery Mobile 没尝试,感觉会增负担。
4,重点来了:
只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果,无需插件。可拷贝下面代码运行。
<!DOCTYPE html>
<html lang="zh_cmn">
<head>
<meta charset=utf-8 />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<title></title>
<style>
.head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;background-color:#99CC00;}
.head{top:0;}
.foot{bottom:0;}
.main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;background-color:#BABABA;}
</style>
</head>
<body>
<header class="head">顶部固定区域</header>
<article class="main" id="wrapper">
<div>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<p>当内容欲出隐藏时,灰色区域可上下拖动</p>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
</div>
</article>
<footer class="foot">底部固定区域</footer>
</body>
</html>
当小键盘出现时头部、底部自动跳到页面最顶端、最底端。键盘隐藏时又会固定在头部,底部。顿时感觉开朗了
相关推荐
position: fixed;这个属性用起来确实很方便,可以轻松的实现固定位置的浮动层效果。但是,它不支持IE6及以下版本。于是很多同学使用JS模拟。今天写了一个DEMO,涉及左侧、右侧。及上下两边,共四种位置的固定,与...
实现div居中的方法多如牛毛,本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中,这个小技巧比较使用,大家看看
IE6的兼容性问题主要出现在position:fixed上面,如何解决已经在《【CSS】IE6中的position:fixed问题与随滚动条滚动的效果》(点击打开链接)介绍过了。 下面具体说说如何利用JavaScript中的滚动事件[removed]实现...
一般要固定某个div,我们都会让该div{position:fixed},它的下一个div{position:absolute}看了几个国外的关于CSS的固定定位跨浏览解决方案.他们却反其道而为之
主要介绍了CSS 同级元素position:fixed和margin-top共同使用的问题的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
position:fixed在ie6的使用,hack的使用办法
实现div居中的方法有很多,本例介绍的使用css中position:fixed来实现div的上下左右居中,下面以一个DIV 元素在浏览器窗口居中为例
主要介绍了使用CSS样式position:fixed水平滚动的方法,需要的朋友可以参考下
在项目中有用到sticky的布局,可是由于兼容性问题,在安卓端没有很好的兼容,所以为了彻底解决这个问题只能写一个组件来解决这个麻烦的问题,这里为什么是组件而不是指令是因为,是有原因的,下面会讲到。...
vant+vue初始化移动端项目,border样式重置:border.css
h5 css3移动端漂亮登录界面,使用了vue.js,已经打包,响应式布局,自动适应不同设备.
当前主流浏览器中,chrome,firefox,ie7,8等想要固定一个元素位置,不随内容的滚动而滚动,众所周知,css中position: fixed;即可解决。
JavaScript+CSS的移动端3D翻转刷新,很好的3D效果,兼容移动端
IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #gs{border:1px solid #000;position:fixed;right:30px;top:120px} </style> <!–[if IE 6]>
复制代码代码如下: .my-fiexd{ position:fixed; height:40px; width:40px; background-color:red; border:0px; } 可是当某个div随着滚动条滚动时而被设置成fixed时(置顶,很多menu都会这样),可能会发生一个小...
position:sticky用法 position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的...
切入正题,以下的IE6下CSS的兼容性写法: 复制代码代码如下:/* 修正IE6振动bug */html,* html body{background-image:url(about:blank);background-attachment:fixed;}/* IE6 头部固定 */...