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 相关文章推荐
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery入门之层次选择器实例简析
Dec 11 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 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的大小写敏感问题整理
2011/12/29 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 获取list特定元素下标的实例讲解
2018/04/09 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
详解python深浅拷贝区别
2019/06/24 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
Python 内存管理机制全面分析
2021/01/16 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
金蝶的一道SQL笔试题
2012/12/18 面试题
房产继承公证书
2014/04/09 职场文书
安全协议书
2014/04/23 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle