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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
js给selected添加options的方法
May 06 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
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使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
Python实现的ini文件操作类分享
2014/11/20 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
python实现websocket的客户端压力测试
2019/06/25 Python
python实现简单成绩录入系统
2019/09/19 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
PHP如何设置和取得Cookie值
2015/06/30 面试题
计算机专业毕业生的自我评价
2013/11/18 职场文书
上课迟到检讨书
2014/02/19 职场文书
支部鉴定材料
2014/06/02 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
大学生自荐信范文
2015/03/05 职场文书
2016党员入党决心书
2015/09/22 职场文书
java设计模式--建造者模式详解
2021/07/21 Java/Android
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
Python实现简单得递归下降Parser
2022/05/02 Python
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS