80864人阅读
小效果（9）
移动端开发仿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());
问题来了：滑动页面时头部底部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:top:50 bottom:50overflow:就可以实现效果，无需插件。可拷贝下面代码运行。
&!DOCTYPE html&
&html lang=&zh_cmn&&
&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&
.head,.foot{position:left:0;height:38line-height:38width:100%;background-color:#99CC00;}
.head{top:0;}
.foot{bottom:0;}
.main{position:top:38bottom:38width:100%;overflow:background-color:#BABABA;}
&header class=&head&&顶部固定区域&/header&
&article class=&main& &id=&wrapper&& &
& & &&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&
&/article&
&footer class=&foot&&底部固定区域&/footer&
&当小键盘出现时头部、底部自动跳到页面最顶端、最底端。键盘隐藏时又会固定在头部，底部。顿时感觉开朗了
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：262580次
积分：2113
积分：2113
排名：第18021名
原创：58篇
转载：11篇
评论：43条
(1)(1)(1)(1)(2)(3)(1)(1)(1)(2)(6)(6)(1)(1)(5)(5)(3)(1)(1)(2)(5)(5)(14)使用position：fixed固定定位可以很方便将元素固定在页面某处。但是它和绝对顶部不同：绝对定位是相对于其position：absolute的父元素来定位；而fixed定位相对于屏幕；这导致在左右分别布局的页面上出现定位的元素在不同显示器或不同型号手机上出现偏差。使用绝对定位能通过相对父元素来保证定位元素在左边某处或右边某处。
此方法有两个步骤：1.需定位元素的css：
z-index:&90;
position:&absolute;
width:&100%;
height:&40px;
（重点是position：absolute）
能滚动的元素的css：
position:&absolute;
bottom:&-2px;
-webkit-overflow-scrolling:&touch;
overflow-y:&scroll;
margin-top:&43px;
（margin-top是为了避免滚动区域被固定在顶部的固定元素挡住）
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2219次
排名：千里之外问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
微信端有底部导航，如果用position:fixed的话，页面向上滑的时候，底部导航会随着页面滑动，不能用position:absolute因为页面里有用dropload.js做的加载更多效果，求问，这个问题怎么解决？
来源: 微信开放平台问答
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我也遇到这样的问题了
，，，你的现在解决了吗？
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：具体的情况：
&在模拟器中没问题，可是在真机下就出现以下问题, &&textarea&&/&在一个view盒子中，view盒子是固定定位，页面滑动时候，固定定位的盒子会定在屏幕的相对位置，但是盒子中的textarea组件（字）会跟随页面滑动（组件固定在了相对页面的位置，而非屏幕的相对位置）。
　　官方文档中有提及--&如果 textarea 是在一个&position:fixed&的区域，需要显示指定属性 fixed 为 true。
官方文档链接：https://mp./debug/wxadoc/dev/component/textarea.html&
1 &textarea name="textarea" class="canael_textarea" fixed="true"/&
属性的填写，fixed默认是 false的，但是如果有业务需要变动状态（某状态要false，某状态要true），则需要添加绑定，直接写false会默认转化为true。
比如 ： fixed="true" (结果为true)， &fixed="false"(结果也会是true)，所以需要绑定参数
<span style="color: # &textarea name="textarea" class="canael_textarea" fixed="{{tag}}"/&
<span style="color: #
<span style="color: # var app = getApp();
<span style="color: # Page({
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: # })
总结：以上内容供学习总结分享，有什么不对的地方或可优化的地方，欢迎各位多多指教。
阅读(...) 评论()