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 ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
BootStrap的两种模态框方式
May 10 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 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实现全角字符转为半角方法汇总
2015/07/09 PHP
php显示页码分页类的封装
2017/06/08 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Python输入二维数组方法
2018/04/13 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
python如何实现word批量转HTML
2020/09/30 Python
Pandas之缺失数据的实现
2021/01/06 Python
SQL注入攻击的种类有哪些
2013/12/30 面试题
安全员岗位职责
2013/11/11 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
学校读书活动总结
2014/06/30 职场文书
2014年电工工作总结
2014/11/20 职场文书
运动会200米广播稿
2015/08/19 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript