欢迎光临! 【模板119】平台每天更新源码-所有VIP源码均有在线演示

logo

建站一条龙服务

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

织梦源码推荐

以上固定层会在高下拖动时隐藏顶部固定显示底部固定  向上拖动时隐藏询问固定 显示顶部固定

?

 

 

任何情况  都显示固定内容 

 

以上为特殊效果  区别可自行在自己网站代码里测试

 

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

 


底部固定区域


</html>

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

二维码

本文手机访问二维码

作者:mb119.com        关注度:52        发布时间:2018-04-15 16:25:07
首先声明,只要是我们的vip会员所有源码均可以免费下载,不做任何限制
☉本站的源码不会像其它下载站一样植入大量的广告。
☉本站只提供精品织梦源码,源码在于可用,不在多!!希望在这里找到你合适的。
☉本站提供的整站织梦程序,均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源(包括源码、模板、素材、特效等)仅供学习与参考,请勿用于商业用途。
☉如有其他问题,请加网站客服QQ(971977809)进行交流点击这里给我发消息
相关程序开发内容
在线客服