iphone safari不支持position fixed的解决方法
更新时间：2012年05月04日 00:48:20 作者：
最近一直在做移动web开发，开发过程中遇到了许多问题，mobile safari不支持position: fixed就是一件很头疼的事情
需求是这样的，许多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前端开发者带来了福音。
作者：清流鱼
复制代码 代码如下:
<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前端开发者带来了福音。
作者：清流鱼
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了js html实现计算器功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
javascript数字格式化通用类 accounting.js使用
accounting.js 是一个非常小的JavaScript方法库用于对数字，金额和货币进行格式化。并提供可选的Excel风格列渲染。它没有依赖任何JS框架。货币符号等可以按需求进行定制2012-08-08
这篇文章主要为大家详细介绍了小程序自定义tabBar组件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要为大家详细介绍了更靠谱的横竖屏检测方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
AngularJs中Bootstrap3 datetimepicker使用实例
这篇文章主要为大家详细介绍了AngularJs中Bootstrap3 datetimepicker使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了js子页面如何获取父页面数据,需要的朋友可以参考下2014-05-05
这篇文章主要为大家详细介绍了第一次动手实现bootstrap table分页效果的相关代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要为大家详细介绍了JS实现用户管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要为大家详细介绍了微信小程序表单验证form提交错误提示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要介绍了javascript针对不确定函数的执行方法,实例分析了eval函数及符号属性两种执行方式,需要的朋友可以参考下2015-12-12
最新评论