iphone safari不支持position fixed的解决办法
最近一直在做移动web开发,开发过程中遇到了许多问题,mobile safari不支持position: fixed就是一件很头疼的事情。需求是这样的,许多pc web页面的导航都是固定的,比如google的首页,现在要将这种固定的导航转移到mobile web下,很自然地就会想到position:fixed; bottom: 0,android下运行正常,但在iphone safari下就会出现问题,当滚动条滚动时,导航条就会出现屏幕的上方,黑乎乎的一块,很不协调。许多人推荐iscroll、jquery mobile等框架,但有时效果不如意或是得阅读框架源码进行二次开发,会花费好长一段时间的。经过一段时间的研究,找到了一种解决办法,比较简便,但效果还是比不上pc web。
1: <div id="fixnav" style=" position: absolute; z-index: 1000; height: 50px; opacity: 0.9;">nav</div>
2: <script type="text/javascript">
3: $(window).scroll(function(){
4: // 重点就是下面这一条语句的实现
5: $("#fixnav").css({top: window.innerHeight + window.scrollY - $("#fixnav").outerHeight() });
6: });
7: </script>
不过最新ios5已经支持了position: fixed,给广大web前端开发者带来了福音。
---end
作者:清流鱼
出处:http://www.cnblogs.com/qingliuyu/
新浪微博:http://weibo.com/qingliuyu
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
转载于:https://www.cnblogs.com/qingliuyu/archive/2012/05/02/2479531.html
iphone safari不支持position fixed的解决办法相关推荐
- 实现 IE6 支持 position fixed 的 CSS 属性
众所周知 IE6 不支持 position:fixed ,这个 bug 与 IE6 的双倍 margin 和不支持 png 透明等 bug 一样臭名昭著. 如何让 position:fixed 在 I ...
- 修正IE6不支持position:fixed的bug
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6- ...
- xcode 4.2 不再支持 Window-Based Application 的解决办法(转载)
xcode 4.2 不再支持 Window-Based Application 的解决办法: 1.创建空项目 Empty Application.(在Xcode4.2下创建的这个空项目不再有 ...
- [已经验证通过]xp sp2 不支持WPA协议的解决办法
XP SP2 不支持WPA协议的解决办法 接用户反馈,使用笔记本不能连接无线网络, 据用户反映说他在其它地方能正常连接无线,其它同事也能正常连接无线网络,相当于只有他一台电脑不能连接无线网络. 根据用 ...
- 错误 -source 1.6 中不支持 diamond 运算符的解决办法(已解决)
错误: -source 1.6 中不支持 diamond 运算符的解决办法 第一步:打开setting-> Build.Execution.Deployment 第二步:打开项目结构 开项目结构
- 关于xlrd最新版本不支持.xlsx文件的解决办法
文章目录 关于xlrd最新版本不支持.xlsx文件的解决办法 解决方案,回退到xlrd1.2.0版本 这是很久之前我就遇到的一个问题,这次又遇到了,发现之前没有写笔记,这次记录一下. 关于xlrd最新 ...
- 完美解决IE6不支持position:fixed的bug
废话不多说,先看一下下面这段代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content- ...
- ie8 不支持 position:fixed 的简单解决办法
今天发现使用 position:fixed 的页面在firefox下没有问题,在IE8下却不能正常显示,在网上找了找,有不少相关文章,但是不是不起作用就是太复杂,后来终于发现一个简单的解决办法,就是在 ...
- CAD二次开发--系统找不到指定的文件/应用程序不支持实时(JIT)调试解决办法【即:C#调用外部exe文件在CAD内部执行失败处理办法】
我们知道一个大型的程序系统很多功能之间是相互独立的,因此对于一个exe可执行文件我们可以直接进行调用,丰富我们程序中的功能!但是今天在测试的时候发现,原本调试时候可以调用的exe文件,在打包后竟提示错 ...
最新文章
- 【征稿进行时】计算机与智能控制主题征稿,ICCEIC 2020持续征稿中!
- 怎么用python扫描主机_python扫描主机开放的端口
- 火狐浏览器firefox adobe flash player 崩溃
- Linux 练习题-3文件与磁盘 问答
- 【Modern OpenGL】摄像机系统 Camera
- lnmp解析php,搭建LNMP,可以解析PHP文件-Go语言中文社区
- mysql base_MySQLbase
- 在Linux下巧下载
- 多个pdf合并成一个pdf_多个PDF怎么合并?这些PDF合并方法很简单!
- 用 VC++ 调用最小的浏览器内核创建一个简易的浏览器
- STM32多个串口重定义
- 从一个简单的main方法执行谈谈JVM工作机制
- web网页设计期末课程大作业——基于HTML仿唯品会电商项目的设计与实现
- 百度地图API学习---隐藏百度版权标志
- java基础学习:java中的反射
- 使用无监督算法检测DGA域名(一)
- FTP主动连接、被动连接、连接端口的分配与使用、误区总结
- 桌面缓存服务器,primocache 把内存虚拟成硬盘缓存的硬盘优化软件
- 《Effective STL》读书笔记之容器1-5
- 三年级下册我想发明的机器人_3年级我想发明的机器人作文300字(共5篇)
热门文章
- leetcode前缀树java_Java实现 LeetCode 208 实现 Trie (前缀树)
- Biztalk 调用带Soap Head WebService的方法
- 为什么程序员也能成为伟大的CEO
- linux中pstree命令的含义,pstree命令--Linux命令应用大词典729个命令解读
- 的write方法有哪些参数_Python笔记13:文件操作三件套:read,write,seek
- Golang解析yaml格式文件
- ANE 在 Android 上的应用
- if shell 条件语句简写_shell中的if语句
- globalmapper如何选取图像上的点_图像配准算法
- Ros无法自动补全命令的解决