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 相关文章推荐
调整小数的格式保留小数点后两位
May 14 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 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
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
thinkphp分页集成实例
2017/07/24 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
详解jQuery事件
2017/01/13 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
keras topN显示,自编写代码案例
2020/07/03 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
一套C#面试题
2013/10/09 面试题
2015年毕业生实习评语
2015/03/25 职场文书
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫