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

 

转载自:http://www.ithao123.cn/content-649841.html

 

 

移动端开发仿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;就可以实现效果,无需插件。可拷贝下面代码运行。

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!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>

  

posted @   Ben Chan  阅读(2941)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示