移动端开发仿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 中 position:fixed 吸底时的滑动出现抖动的解决方案 iOS 中 position:fixed 吸底时的滑动出现抖动是前端开发中常见的问题之一。这个问题的出现主要是由于 native 和 h5 两个原因引起的抖动。native 的抖动是...
本篇文章主要探讨了如何利用CSS属性position:fixed来实现DIV的绝对居中。 首先，了解position:fixed属性的作用是关键。position:fixed表示元素相对于浏览器窗口进行定位，这意味着无论页面如何滚动，元素都将保持在...
这篇博客“IE6下的纯CSS完美position:fixed实现”可能介绍了一种通过CSS技巧或JavaScript工作来模拟`position: fixed`的方法。 尽管描述为空，我们可以推测博主可能探讨了以下几种常见策略： 1. **表达式...
在微信小程序开发中，`position:sticky` 是一个非常实用的CSS样式，它结合了`position:relative`和`position:fixed`的特点，用于创建元素的粘性定位。这个特性允许元素在滚动到特定位置时固定在屏幕的某个位置，从而...
`position:fixed`是一个非常重要的CSS属性，它使得元素在页面上保持固定的位置，不随滚动条滚动，常用于创建固定顶部导航、侧边栏等。然而，在Internet Explorer 6（简称IE6）这个古老且具有很多兼容性问题的浏览器...
position: fixed;这个属性用起来确实很方便，可以轻松的实现固定位置的浮动层效果。但是，它不支持IE6及以下版本。于是很多同学使用JS模拟。今天写了一个DEMO，涉及左侧、右侧。及上下两边，共四种位置的固定，与...
描述中提到的"完美兼容IE6"是一个挑战，因为IE6对CSS标准的支持并不完全，尤其是对于`position: fixed;`的处理存在一些问题。在其他现代浏览器中，`position: fixed;`工作得相当好，但在IE6中，需要采用一些特殊的...
这个例子中的技巧在于，通过媒体查询和 IE 特有的 CSS 规则，让在支持 `position: fixed` 的浏览器中正常工作，同时在不支持的浏览器中采用备选方案，确保了在大多数浏览器中都有良好的用户体验。 总的来说，`...
然而，不幸的是，Internet Explorer 6 (IE6) 并不支持 `position:fixed`，这就给开发者带来了兼容性问题。 为了解决IE6中的这个问题，通常需要借助JavaScript来模拟 `position:fixed` 的效果。以下是一个实现兼容性...
这个HTML文件很可能会包含JavaScript代码和CSS样式，用于创建一个具有Lightbox效果、Windows关机动画、使用`div`覆盖页面并解决了IE6的`position:fixed`兼容性问题的页面。 总的来说，这个知识点涵盖了Web开发中的...
- 一种常见的技巧是将 `iframe` 的 `position` 设置为 `relative` 或 `absolute`，并将其 `z-index` 设置得很高，使 `fixed` 元素能够覆盖 `iframe` 的边界。 - 将 `iframe` 的 `scrolling` 属性设置为 `no`，然后...
其中一个典型的问题是IE6不支持CSS中的`position:fixed`属性，这个属性允许元素在页面滚动时保持其在屏幕上的位置，常用于创建导航栏或页脚等固定位置的元素。 `position:fixed`在其他现代浏览器中工作良好，但在IE...
在Web开发中，`position:fixed`是一个非常有用的CSS属性，它允许元素相对于浏览器窗口定位，即使在滚动页面时，元素也会保持在屏幕的固定位置。然而，这个特性在Internet Explorer 6 (IE6)中并不原生支持，导致...
在本文中，我们将探讨如何利用JavaScript的滚动事件`window.onscroll`以及CSS中的`position:fixed`属性来创建一个兼容IE6的“回到顶部”组件。首先，我们需要理解这两个关键概念。 `window.onscroll`事件是...
在前端开发中，`position: sticky` 是一种CSS布局属性，它允许元素在滚动到某个阈值时在页面上保持“粘性”。然而，`position: sticky` 在某些浏览器，尤其是旧版本的Android设备上可能存在兼容性问题。为了解决这个...
在网页开发中，IE6（Internet Explorer 6）的许多特性与现代浏览器存在不兼容性，其中`position:fixed`就是一个典型例子。`position:fixed`在其他浏览器中可以让元素保持在视口的固定位置，不论用户如何滚动页面，但...
定位涉及到`position`属性，它有多个值，如`static`、`relative`、`absolute`和`fixed`。本篇文章将重点讨论在使用`fixed`定位时只指定`position: fixed`而忽略边位移所引发的问题。 首先，我们需要理解定位的基础...
### 解决IE6中的定位问题：Position Fixed 在早期的Web开发中，Internet Explorer 6（简称IE6）因其浏览器兼容性问题而臭名昭著。其中一个常见的问题是`position: fixed;`属性在IE6中不起作用。这使得开发者很难...