iphone safari不支持position fixed的解决方法


Posted in Javascript onMay 04, 2012

需求是这样的,许多pc web页面的导航都是固定的,比如google的首页,现在要将这种固定的导航转移到mobile web下,很自然地就会想到position:fixed; bottom: 0,android下运行正常,但在iphone safari下就会出现问题,当滚动条滚动时,导航条就会出现屏幕的上方,黑乎乎的一块,很不协调。许多人推荐iscroll、jquery mobile等框架,但有时效果不如意或是得阅读框架源码进行二次开发,会花费好长一段时间的。经过一段时间的研究,找到了一种解决办法,比较简便,但效果还是比不上pc web。

<div id="fixnav" style=" position: absolute; z-index: 1000; height: 50px; opacity: 0.9;">nav</div> 
<script type="text/javascript"> 
$(window).scroll(function(){ 
// 重点就是下面这一条语句的实现 
$("#fixnav").css({top: window.innerHeight + window.scrollY - $("#fixnav").outerHeight() }); 
}); 
</script>

不过最新ios5已经支持了position: fixed,给广大web前端开发者带来了福音。
作者:清流鱼
Javascript 相关文章推荐
优化 JavaScript 代码的方法小结
Jul 16 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
理解javascript中的严格模式
Feb 01 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 Javascript
JavaScript之自定义类型
May 04 #Javascript
Javascript 键盘事件的组合使用实现代码
May 04 #Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 #Javascript
jQuery 开发者应该注意的9个错误
May 03 #Javascript
jQuery Ajax请求状态管理器打包
May 03 #Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 #Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 #Javascript
You might like
详细解读php的命名空间(二)
2018/02/21 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
python中defaultdict的用法详解
2017/06/07 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
python根据时间获取周数代码实例
2019/09/30 Python
python 表格打印代码实例解析
2019/10/12 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
医学求职自荐信
2014/06/21 职场文书
物流管理专业推荐信
2014/09/06 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
检讨书模板
2015/01/29 职场文书
教师工作表现自我评价
2015/03/05 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript