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

 

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

 

 

移动端开发仿app头部底部固定设置position:fixed，android2.2以上已经实现。但是在ios8以下系统，当小键盘激活时，都会出现位置浮动问题。如图：

 

如何解决：

查阅资料之后想到一下几种解决方法

1，使用position：absolute模拟

问题来了：滑动页面时头部底部div会有明显的抖动。

2，判断当前获得焦点元素是input则隐藏div改为position：absolute

问题来了:不停监控dom，消耗资源。如果input个数较少，可在input里面添加onfocus事件好一些。但是如果是底部固定div此方法好像不太给力。

 

 

3，插件iscroll.js个人感觉不是很好用。可能方法不对，jQuery Mobile  没尝试，感觉会增负担。

 

4，重点来了：

只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果，无需插件。可拷贝下面代码运行。

 

  
  
  
  
  
  
  
  
  
  
顶部固定区域
  
  
      

       
当内容欲出隐藏时，灰色区域可上下拖动
      
当内容欲出隐藏时，灰色区域可上下拖动
       
当内容欲出隐藏时，灰色区域可上下拖动
       
当内容欲出隐藏时，灰色区域可上下拖动
       
当内容欲出隐藏时，灰色区域可上下拖动
       
当内容欲出隐藏时，灰色区域可上下拖动
       
当内容欲出隐藏时，灰色区域可上下拖动
       
当内容欲出隐藏时，灰色区域可上下拖动
       
当内容欲出隐藏时，灰色区域可上下拖动
       
当内容欲出隐藏时，灰色区域可上下拖动
       
当内容欲出隐藏时，灰色区域可上下拖动
       

           

      

      

        

        

       

       

       

        

        

        

        

        

        

        

        

        

        

      

      

        

        

       

       

      

        

        

       

       

      

     

     

       

      

      

       

       

       

       

       

       

       

        

       

       

       content 

      content 

      content 

      content 

      content 

      content 

      content 

      content 

      content 

    
  
  
底部固定区域