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传值 判断
Oct 26 Javascript
javascript:void(0)的真正含义实例分析
Aug 20 Javascript
js tab效果的实现代码
Dec 26 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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 skymvc 一款轻量、简单的php
2011/06/28 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
python常用排序算法的实现代码
2019/11/08 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
计算机系本科生求职信
2014/05/31 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
市场营销工作计划书
2014/09/15 职场文书
2015年度保密工作总结
2015/04/24 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android