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系列(44):设计模式之桥接模式详解
Mar 04 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
浅析JS抽象工厂模式
2017/12/14 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Python 数据结构之队列的实现
2017/01/22 Python
Python中几种导入模块的方式总结
2017/04/27 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
python判断完全平方数的方法
2018/11/13 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
python代码中怎么换行
2020/06/17 Python
软件测试英文面试题
2012/10/14 面试题
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
2015年超市工作总结
2015/04/09 职场文书
上诉答辩状范文
2015/05/22 职场文书