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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
html实现随机点名器的示例代码
Apr 02 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学习之数据类型之间的转换代码
2011/05/29 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
JS检测图片大小的实例
2013/08/21 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
战友聚会邀请函
2014/01/18 职场文书
财经学院自荐信范文
2014/02/02 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
团队口号大全
2014/06/06 职场文书
农行心得体会
2014/09/02 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
环卫工作个人总结
2015/03/04 职场文书
交通安全温馨提示语
2015/07/14 职场文书
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫