移动端fix

之前做移动端碰到的一个问题:一个导航栏从不固定--》固定的需求
前提很简单,先计算各种高度,然后再做判断body的滚动高度然后进行样式变换,然而最苦恼的就是样式变换了

一开始方法是 超过高度之后变化position:fixed,在pc端上测试的时候好好的,可是到了移动端之后,会发现屏幕在滑倒超出高度之后(手指没有离开屏幕),并不会即时响应,而是等手指离开屏幕之后导航栏才会fix到最顶部,我一开始以为是不是scroll这个事件在移动端有问题,然后用touchmove还是一样的结果,然后打开电脑调试手机查看响应,然而我明确看到手机滑屏超过高度之后,调试工具里显示的position:fixed已经变化了,但是手机上却没有响应,,之后问了其他人,可能觉得是手机浏览器的优化造成的。。。

今天在aem站看到个这样的导航栏,所以马上用看它的代码,发现它的导航栏是先position :absolute,在滑动之后变为fixed。。。原来还有这样的实现方法,,,所以,为自己进行测试了一下!!真的成功了!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,645评论 25 709
  • 卡哥 “热心”大哥哥 资深运动爱好者 时尚界“老司机” 白领这个物种 曾经长期活长辈的嘴巴里 他们最初在小众幼小的...
    卡路里中心阅读 1,378评论 0 0
  • 昨天跑了两趟ups办permit,早上一趟从七点半到十点,下午从十二点到五点。ups的“闪电”速度果然不是盖的,排...
    八爪鱼小丸子阅读 1,462评论 0 0
  • 《矮个子的忧伤》 其实,因为自己的身高,曾一度很悲伤。为此,将自己所有的心思都放在学习上,也不敢轻易说喜欢一个人,...
    爱听音乐的猫阅读 3,751评论 0 0