苹果不支持position: fixed的解决办法_Android/移动互联网/物联网/

夜鹰教程网-程序员的加油站

·设为首页·加入收藏

本站首页技术文章全套前端云课堂智慧校园

你好，欢迎来到夜鹰网！【去购买教程】

当前位置：文章中心 >> Android/移动互联网/物联网/

苹果不支持position: fixed的解决办法

夜鹰教程网来源：www.yyjcw.com 日期：2017-8-27 21:43:16

最近一直在做移动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前端开发者带来了福音。

复制链接网友评论收藏本文关闭此页

上一条： html5开发移动应用是最好的选择下一条：分分钟开发一个简单的基于HTML5的移动应…

夜鹰教程网成立于2008年，目前已经运营了将近 13 年，发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。我们一直都在坚持的是：认证负责、一丝不苟、以工匠的精神来打磨每一套教程，让读者感受到作者的用心。我们默默投入的时间，确保每一套教程都是一件作品，而不是呆板的文字和视频！目前我们推出在线辅导班试运营，模式为一对一辅导，教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发，winform和物联网开发、web前端开发，但不仅限于此。普通班针对的是国内学员，例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。就业办针对即将毕业上岗的大四学生，或者打算转行的初级开发工程师。留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子，目的是让大家熟练地掌握编程技能，按时完成老师布置的作业，并能顺利地通过考试。详细咨询QQ：1416759661 夜鹰教程网