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 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 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后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
php-fpm中max_children的配置
2019/03/15 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
JS在if中的强制类型转换方式
2018/07/15 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
Python浅复制中对象生存周期实例分析
2018/04/02 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
药剂学专业应届生自荐信
2013/09/29 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
大学生创业项目方案
2014/03/08 职场文书
会计试用期自我评价
2014/09/19 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers