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复选框全选/取消示例
Dec 30 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
Javascript的无new构建实例详解
May 15 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
vue+php实现的微博留言功能示例
Mar 16 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 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中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
script标签属性用type还是language
2015/01/21 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
python实现同时给多个变量赋值的方法
2015/04/30 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
pandas 数据类型转换的实现
2020/12/29 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
详解rem 适配布局
2018/10/31 HTML / CSS
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
什么是servlet链?
2014/07/13 面试题
商场中秋节活动方案
2014/02/07 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
mysql部分操作
2021/04/05 MySQL
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技