移动端开发仿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>
当小键盘出现时头部、底部自动跳到页面最顶端、最底端。键盘隐藏时又会固定在头部，底部。顿时感觉开朗了
相关推荐
综上所述，解决iOS上的`fixed`定位失效问题需要结合CSS技巧、JavaScript监听滚动、使用第三方组件如`MintUI`的`Loadmore`以及优化页面结构和资源。在实际项目中，应根据具体需求和场景选择合适的方法。
在iOS应用设计中，弹出元素（Popover）是一种常见的交互方式，它用于显示额外的信息或者提供操作选项。本文将深入探讨如何使用HTML和CSS技术来创建具有iOS风格的Popover元素，以此来提升网页的用户体验。 首先，...
还可以使用CSS的`position: fixed`属性来让特定元素始终位于屏幕可视区域。某些库，如jQuery Mobile或Ionic Framework，也提供了内置的键盘处理机制。 除了上述技术手段，设计上也可以进行优化，例如，将输入框放置...
7. 使用touch scroll, demo来模拟iPhone的scroll效果，解决Mobile Safari下不支持position:fixed的问题。 使用HTML5和CSS3构建基于webkit的Web Page/App需要注意许多细节，但它可以提供了一个快速、跨平台、美观的...
- **全屏滚动**：利用CSS3的`position: fixed`属性在iOS5和Android 2.2以上版本实现。 - **软键盘控制**：通过特定的`input`类型触发不同的软键盘布局。 - **添加到桌面图标**：使用`...
2. **正确设置CSS属性**：确保滚动容器的`position`为`relative`或`absolute`，子元素的`position`为`absolute`或`fixed`。 3. **禁用浏览器默认滚动**：通过CSS设置`overflow: hidden`来禁止浏览器默认的滚动行为...
在Web前端开发中，CSS的`position`属性（如`fixed`）可以实现类似效果。 4. **大小调整**： 调整`Button`的大小是常见的需求，以适应不同的屏幕尺寸和设计风格。在XML布局文件中，可以通过设置`android:width`和`...
5. 布局和定位：实现双滚动条需要精确的布局和定位技术，可能涉及到Flex布局、Grid布局或传统的CSS定位（如position: absolute/fixed）。 6. 性能优化：为了保证流畅的滚动体验，开发者可能对滚动事件进行了节流或...