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前端开发者带来了福音。
作者:清流鱼

相关文章

  • 无循环 JavaScript(map、reduce、filter和find)

    无循环 JavaScript(map、reduce、filter和find)

    本文由浅入深地介绍了map、reduce、filter和find函数,如何一步一步把循环从代码中抽离掉
    2017-04-04
  • canvas绘制爱心的几种方法总结(推荐)

    canvas绘制爱心的几种方法总结(推荐)

    下面小编就为大家带来一篇canvas绘制爱心的几种方法总结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JS中如何轻松遍历对象属性的方式总结

    JS中如何轻松遍历对象属性的方式总结

    这篇文章主要给大家总结介绍了关于在JS中如何轻松遍历对象属性的方式,文中通过示例代码介绍的非常详细,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • JavaScript模板引擎实现原理实例详解

    JavaScript模板引擎实现原理实例详解

    这篇文章主要介绍了JavaScript模板引擎实现原理,结合实例形式详细分析了JavaScript模板引擎原理、定义、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-12-12
  • layui(1.0.9)文件上传upload,前后端的实例代码

    layui(1.0.9)文件上传upload,前后端的实例代码

    今天小编就为大家分享一篇layui(1.0.9)文件上传upload,前后端的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 分享10个原生JavaScript技巧

    分享10个原生JavaScript技巧

    本文给大家分享的是个人总结的10条非常常用的原生javascript的小技巧,都是平时项目中用到的,这里总结记录下来,有需要的小伙伴可以参考下。
    2015-04-04
  • JS基于封装函数实现的表格分页完整示例

    JS基于封装函数实现的表格分页完整示例

    这篇文章主要介绍了JS基于封装函数实现的表格分页,结合完整实例形式分析了javascript针对table表格数据的遍历、读取以及模拟分页显示的相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • javascript时间函数基础介绍

    javascript时间函数基础介绍

    这篇文章主要介绍了javascript中提供了Date对象来进行时间和日期的计算,这里简单的介绍下, 方便需要的朋友
    2013-03-03
  • Javascript 实现全屏滚动实例代码

    Javascript 实现全屏滚动实例代码

    这篇文章主要介绍了Javascript 实现全屏滚动实例代码的相关资料,需要的朋友可以参考下
    2016-12-12
  • js鼠标移动时禁止选中文字

    js鼠标移动时禁止选中文字

    本文主要介绍了js鼠标移动时禁止选中文字的方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02

最新评论