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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
jquery实现页面加载效果
Feb 21 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
Angular2+如何去除url中的#号详解
Dec 20 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
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自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
js实现拖拽效果
2015/02/12 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
2014年机关植树节活动方案
2014/02/27 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
幼儿园辞职信
2015/05/13 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL