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的日期选择控件
Oct 27 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
React之PureComponent的使用作用
Jul 10 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中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
最短的IE判断代码
2011/03/13 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
python解析xml文件实例分享
2013/12/04 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
python3多线程知识点总结
2019/09/26 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
Python用户自定义异常的实现
2020/12/25 Python
Python的collections模块真的很好用
2021/03/01 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
就业推荐自我鉴定
2013/10/06 职场文书
安全生产专项整治方案
2014/05/06 职场文书
2014年宣传工作总结
2014/11/18 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python
MySQL触发器的使用
2021/05/24 MySQL
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL