`

小技巧css解决移动端ios不兼容position:fixed属性，无需插件

jsjavascriptcssiosposition 
阅读更多

移动端开发仿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>

 当小键盘出现时头部、底部自动跳到页面最顶端、最底端。键盘隐藏时又会固定在头部，底部。顿时感觉开朗了

 

转自：http://blog.csdn.net/liu__hua/article/details/40106595

分享到：
| Fxtpl v1.0 繁星前端模板引擎(非原创)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    详解iOS中position:fixed吸底时的滑动出现抖动的解决方案

    iOS 中 position:fixed 吸底时的滑动出现抖动的解决方案 iOS 中 position:fixed 吸底时的滑动出现抖动是前端开发中常见的问题之一。这个问题的出现主要是由于 native 和 h5 两个原因引起的抖动。native 的抖动是...

    css中position:fixed实现div居中上下左右居中

    本篇文章主要探讨了如何利用CSS属性position:fixed来实现DIV的绝对居中。 首先，了解position:fixed属性的作用是关键。position:fixed表示元素相对于浏览器窗口进行定位，这意味着无论页面如何滚动，元素都将保持在...

    IE6下的纯CSS完美position:fixed实现

    这篇博客“IE6下的纯CSS完美position:fixed实现”可能介绍了一种通过CSS技巧或JavaScript工作来模拟`position: fixed`的方法。 尽管描述为空，我们可以推测博主可能探讨了以下几种常见策略： 1. **表达式...

    微信小程序----position:sticky

    在微信小程序开发中，`position:sticky` 是一个非常实用的CSS样式，它结合了`position:relative`和`position:fixed`的特点，用于创建元素的粘性定位。这个特性允许元素在滚动到特定位置时固定在屏幕的某个位置，从而...

    position:fixed在ie6的使用

    `position:fixed`是一个非常重要的CSS属性，它使得元素在页面上保持固定的位置，不随滚动条滚动，常用于创建固定顶部导航、侧边栏等。然而，在Internet Explorer 6（简称IE6）这个古老且具有很多兼容性问题的浏览器...

    IE6不兼容position:fixed属性的解决办法分享

    position: fixed;这个属性用起来确实很方便，可以轻松的实现固定位置的浮动层效果。但是，它不支持IE6及以下版本。于是很多同学使用JS模拟。今天写了一个DEMO，涉及左侧、右侧。及上下两边，共四种位置的固定，与...

    position_fixed

    描述中提到的"完美兼容IE6"是一个挑战，因为IE6对CSS标准的支持并不完全，尤其是对于`position: fixed;`的处理存在一些问题。在其他现代浏览器中，`position: fixed;`工作得相当好，但在IE6中，需要采用一些特殊的...

    跨浏览器的实践:position:fixed 层的固定定位

    这个例子中的技巧在于，通过媒体查询和 IE 特有的 CSS 规则，让在支持 `position: fixed` 的浏览器中正常工作，同时在不支持的浏览器中采用备选方案，确保了在大多数浏览器中都有良好的用户体验。 总的来说，`...

    javascript ie6兼容position:fixed实现思路

    然而，不幸的是，Internet Explorer 6 (IE6) 并不支持 `position:fixed`，这就给开发者带来了兼容性问题。 为了解决IE6中的这个问题，通常需要借助JavaScript来模拟 `position:fixed` 的效果。以下是一个实现兼容性...

    HTML IE6 纯CSS 解决 position fixed 的问题

    为了解决IE6中的`position: fixed;`问题，我们可以采用以下几种方法： 1. **条件注释法**： 在HTML文档的头部，可以使用IE6特有的条件注释来引入一个专门为IE6定制的CSS文件，这样可以针对IE6浏览器提供特别的样式...

    CSS 同级元素position:fixed和margin-top共同使用的问题

    在网页设计中，CSS的定位属性position: fixed经常被用来创建固定在页面上的元素，如顶部导航栏。而margin属性则用来给元素添加外边距。当这两个属性共同作用于同级元素时，可能会遇到一些布局上的问题。本文探讨了在...

    解决iframe中fixed失效的问题

    - 一种常见的技巧是将 `iframe` 的 `position` 设置为 `relative` 或 `absolute`，并将其 `z-index` 设置得很高，使 `fixed` 元素能够覆盖 `iframe` 的边界。 - 将 `iframe` 的 `scrolling` 属性设置为 `no`，然后...

    js完美解决IE6不支持position:fixed的bug

    其中一个典型的问题是IE6不支持CSS中的`position:fixed`属性，这个属性允许元素在页面滚动时保持其在屏幕上的位置，常用于创建导航栏或页脚等固定位置的元素。 `position:fixed`在其他现代浏览器中工作良好，但在IE...

    css中position:fixed实现div在窗口上下左右居中

    对于旧版IE浏览器，如IE6，可能不支持position:fixed或者transform属性。在这种情况下，可以通过设置_position:absolute作为兼容性写法，确保在不支持fixed的浏览器中，元素仍然能够尽可能地居中。 在实现居中时，...

    IE6支持position:fixed完美解决方法

    在Web开发中，`position:fixed`是一个非常有用的CSS属性，它允许元素相对于浏览器窗口定位，即使在滚动页面时，元素也会保持在屏幕的固定位置。然而，这个特性在Internet Explorer 6 (IE6)中并不原生支持，导致...

    JS解决position:sticky的兼容性问题的方法

    在前端开发中，`position: sticky` 是一种CSS布局属性，它允许元素在滚动到某个阈值时在页面上保持“粘性”。然而，`position: sticky` 在某些浏览器，尤其是旧版本的Android设备上可能存在兼容性问题。为了解决这个...

    ie6 position:fixed解决方案

    在网页设计中，`position: fixed;` 是 CSS 中一个非常重要的属性，它允许元素相对于浏览器窗口保持固定的位置，即使页面内容滚动，该元素也会保持在屏幕上的同一位置。然而，这个特性在 Internet Explorer 6 (IE6) ...

    CSS表达式(expression)解决IE6 position:fixed无效问题

    在网页开发中，IE6（Internet Explorer 6）的许多特性与现代浏览器存在不兼容性，其中`position:fixed`就是一个典型例子。`position:fixed`在其他浏览器中可以让元素保持在视口的固定位置，不论用户如何滚动页面，但...

    CSS中如果固定定位只给出了定位模式position:fixed,没给出边位移引发的问题

    定位涉及到`position`属性，它有多个值，如`static`、`relative`、`absolute`和`fixed`。本篇文章将重点讨论在使用`fixed`定位时只指定`position: fixed`而忽略边位移所引发的问题。 首先，我们需要理解定位的基础...

Magicbox
Global site tag (gtag.js) - Google Analytics