博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iphone safari不支持position fixed的解决办法
阅读量:5136 次
发布时间:2019-06-13

本文共 721 字,大约阅读时间需要 2 分钟。

最近一直在做移动web开发,开发过程中遇到了许多问题,mobile safari不支持position: fixed就是一件很头疼的事情。需求是这样的,许多pc web页面的导航都是固定的,比如google的首页,现在要将这种固定的导航转移到mobile web下,很自然地就会想到position:fixed; bottom: 0,android下运行正常,但在iphone safari下就会出现问题,当滚动条滚动时,导航条就会出现屏幕的上方,黑乎乎的一块,很不协调。许多人推荐iscroll、jquery mobile等框架,但有时效果不如意或是得阅读框架源码进行二次开发,会花费好长一段时间的。经过一段时间的研究,找到了一种解决办法,比较简便,但效果还是比不上pc web。

 
1: 
nav
2: 
3: $(window).scroll(function(){
4:     // 重点就是下面这一条语句的实现
5:     $("#fixnav").css({top: window.innerHeight + window.scrollY - $("#fixnav").outerHeight() });
6: });
7: 

不过最新ios5已经支持了position: fixed,给广大web前端开发者带来了福音。

---end

作者:

出处:

新浪微博:

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。

转载于:https://www.cnblogs.com/qingliuyu/archive/2012/05/02/2479531.html

你可能感兴趣的文章
【大数模板】C++大数类 大数模板
查看>>
【123】
查看>>
《收获,不止Oracle》pdf
查看>>
用户权限设置
查看>>
java 之equals与"=="的区别
查看>>
LinkedList<E>源码分析
查看>>
Real-Time Rendering 笔记
查看>>
如何理解HTML结构的语义化
查看>>
Intellij IDEA(eclipse设置)常用快捷键
查看>>
NAT基本原理
查看>>
Java Content Repository API 简介 转自(https://www.ibm.com/developerworks/cn/java/j-jcr/)
查看>>
Activity之间的跳转:
查看>>
vertical-align你为什么不生效
查看>>
C++ 实践总结
查看>>
composer 国内镜像配置
查看>>
软件是天时、地利、人和的产物!
查看>>
python定时清空本目录下除本脚本外的全部文件
查看>>
【PHP】在目标字符串指定位置插入字符串
查看>>
【JS】jQuery设置定时器,访问服务器(PHP示例)配合微信、支付宝原生支付,跳转web网页...
查看>>
实验四2
查看>>