移动端position:fixed小结

fixed在移动端是个坑,兼容性就是个极品。

ios的bug比较多,详见https://github.com/maxzhang/maxzhang.github.com/issues/2

作者建议我们安卓还是使用fixed比较好,ios用iscroll来填坑比较好

关于fixed一些小细节还可以参考一下:

https://github.com/maxzhang/maxzhang.github.com/issues/11

里面提及到的例子:http://output.jsbin.com/omaCOSir/latest

布局的方法是:

<header class="relative">
    <div class="fixed">...</div>
</header>
<div class="main"></div>
<footer>
    <div class="fixed">...</div>
</footer>

有一点不明白的是为什么要用relative来表示header和footer,虽然真正起作用的是fixed。

如果fixed不支持,有一个我个人认为很山寨的方法,就是用absolute,onscroll的时候计算$(window).scrollTop(),可是这个方法首先在展示的时候不完美,一点是有时候的计算是小数点,所以会空出1个px(当然可以-1px来补),还有就是频繁计算和重新渲染。

安卓4.4.2有些机子是可以支持的,有些的支持度不够,渲染的时候不给力,但勉强可以渲染,开启硬件加速更佳

没有比较好的办法,不过有无敌方法:iScroll

时间: 2024-10-28 20:14:22

移动端position:fixed小结的相关文章

移动端position:fixed 解决方案

相信不少人做移动端项目的时候都会遇到position:fixed 的坑. 下面提供一个解决方法,不用引入任何其他的js库,纯css解决. 解决问题的关键就是:fixed元素内部必须嵌套一个position:absolute元素,用来装载内容,目的就是为了让内容脱离fixed文档流,屏蔽一些fixed的坑 html部分 <!DOCTYPE html> <html lang="zh_cmn"> <head> <meta name="des

解决ios、微信移动端的position: fixed; 支持性不好的问题 &amp;&amp; 禁用下拉暴露黑底的功能

解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问题(第一个问题). 并且使用了postion: fixed; 的一个种类名称栏在微信下下滑不了,而body是可以的,确实让人很郁闷(第二个问题). 对于第二个问题,我们可以采取的方式是使得微信不能下滑暴露出 powered by ... 的字样. 但是对于第一个问题,确实没有很好的解决方法. 所以就

小技巧css解决移动端ios不兼容position:fixed属性,无需插件

转载自:http://www.ithao123.cn/content-649841.html 移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下几种解决方法 1,使用position:absolute模拟 <script type="text/javascript">     window.onscroll=function(

附两个自己认为比较重要的链接地址(移动端的position:fixed,flexbox实现垂直居中布局)

http://bradfrost.com/blog/mobile/fixed-position/移动端实现position:fixed有哪些问题 http://zh.learnlayout.com/flexbox.html 版权声明:本文为博主原创文章,未经博主允许不得转载.

css解决移动端ios不兼容position:fixed属性,无需插件

移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下几种解决方法 1,使用position:absolute模拟 <script type="text/javascript">     window.onscroll=function(){     $(".fixed").css("top"

position:absolute/relative/fixed小结

1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏移量都是0,那么它将漂浮在原来的位置上,否则,会根据相对该元素外的第一个非static属性的元素进行定位,如果没有非static属性的父元素,则相对于body定位.当偏移后超出浏览器视线的向下或向右的内容不会被隐藏,而是会出现滚动条,但是向左或向上的内容超出后会被隐藏. 2.相对定位:positio

关于移动端position:fixedbug的解决方法

原因:移动端手机激活软键盘,fixed定位会出现元素位置漂移 解决办法:头部底部使用fixed定位,中间正文部分使用absolute,并设置top值和bottom值为顶部底部的高度. 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页</title> <meta name="

移动Web开发实践——解决position:fixed自适应BUG

在移动web中使用position:fixed,会踩到很多坑,在我之前的一篇文章<移动端web页面使用position:fixed问题总结>中已经总结了很多bug,但是在后续的开发中有关fixed的未知bug越来越多,我也在尽量的寻找解决方案. 这篇文章就来先解决一个坑,fixed元素的宽度自适应. 当横屏时,fixed元素不能自适应横屏的宽度,bug表现如下: 这个bug主要在android自带浏览器下出现,与手机型号和系统版本无关,几乎所有android都无法幸免,在不同的手机下可能表现会

父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效

今天在做移动端的页面,无意间发现了一个Chrome浏览器下的一个bug,在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化,此时A节点下面有一个字节点B,节点B使用了position:fixed进行了定位,按照常理节点B应该悬挂在浏览器窗口视图上,不会跟随滚动条而滚动的,但是这个效果在Chrome浏览器下面是无效的,经过测试在IE11.Firefox.safari中均没有问题,在Opera中出现的效果和Chrome中完全一样. 总结一下:在Chrome和