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系列(6) 强大的原型和原型链
Jan 15 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
vue.js循环radio的实例
Nov 07 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
微信自定义分享php代码分析
2016/11/24 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
angularjs $http调用接口的方式详解
2018/08/13 Javascript
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Python pickle模块用法实例分析
2015/05/27 Python
python爬虫的工作原理
2017/03/05 Python
Python中的pack和unpack的使用
2018/03/12 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
新东网科技Java笔试题
2012/07/13 面试题
会计自我鉴定
2014/02/04 职场文书
诚信考试承诺书
2014/03/27 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
委托培训协议书
2014/11/17 职场文书
2014年平安夜寄语
2014/12/08 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
学校百日安全活动总结
2015/05/07 职场文书
转正申请报告格式
2015/05/15 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js