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 相关文章推荐
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 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 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
浅析PHP文件下载原理
2014/12/25 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
sqlalchemy对象转dict的示例
2014/04/22 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
python str字符串转uuid实例
2020/03/03 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
运动会100米解说词
2014/01/23 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
省文明单位申报材料
2014/05/08 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
租房协议书范例
2014/10/14 职场文书
小学语文教学随笔
2015/08/14 职场文书
oracle数据库去除重复数据
2022/05/20 Oracle