固定定位
in mobile development
13年3月14⽇日星期四
fixed定位的故事
13年3月14⽇日星期四
IE6 - I want to f... you
evil expressions + html background hack
or
13年3月14⽇日星期四
人类的希望 - webkit
Err... Mobile...
13年3月14⽇日星期四
现况
13年3月14⽇日星期四
Standard - 标准
13年3月14⽇日星期四
谁是最挫的
<= IOS 4 and <= Android
将元素当做static定位
请不要在这个上面浪费过多时间
13年3月14⽇日星期四
半生不熟的
Android
滚完以后，⼀一下⼀一下地跳回原位。
Android
必须禁⽌止⻚页⾯面缩放才能够fixed定位。
13年3月14⽇日星期四
解决办法 - 不用
⼤大家都懂的
13年3月14⽇日星期四
解决办法 - ISCROLL
呵呵。。。
13年3月14⽇日星期四
解决办法 - 若隐若现
使⽤用absolute替代fixed定位，在滚动的时候隐藏，
在稀释后的scroll事件⾥里渐现出来。
———————————————— JQuery Mobile
13年3月14⽇日星期四
看起来还不错的
Android 4
IOS 5/6
13年3月14⽇日星期四
但是
1. 在IOS 6中，如果⽗父元素fixed定位，未指定宽
⾼高，且包含⼀一个absolute定位的⼦子元素，则fixed
失效，表现为滚动结束后跳回固定处。
解决办法：
为⽗父元素添加如下样式：
outline: 1px solid rgba(0, 0, 0, 0);
参考链接：
13年3月14⽇日星期四
但是
2. 在IOS 6中，第⼀一次滑动，元素会固定不住。
解决办法：
1，滚⼀一下：(0,1);
2，空字体：
header {
font-family: "FixFont";
}
@font-face {
font-family: "FixFont";
src: url();
}
13年3月14⽇日星期四
上升到库的高度
13年3月14⽇日星期四
曾经的⼀一⼑刀切
曾经我们将Android集体打⼊入冷宫，因为他们
坑太多。
if($.) kill you!
13年3月14⽇日星期四
能⼒力检测
思路和modernizr⼀一样，通过检测被设置为
fixed的元素在滚动以后是否还保持原位。
13年3月14⽇日星期四
漏洞
如果还没滚的时候就已经出问题了怎么办？
代表⼿手机：魅族
fixed的元素直接默认visibility:hidden
所以。。。
13年3月14⽇日星期四
终极⽅方案
能⼒力检测
+
⿊黑名单
13年3月14⽇日星期四
如果扯上输入框
13年3月14⽇日星期四
故事从何说起
交互 or PM：聚焦的时候，给我把输⼊入框
提到最顶上，我要让suggestion的下拉框展
⽰示得更多、更好、更⻓长！
13年3月14⽇日星期四
概况
IOS 5/6 能滚到合适的位置，并且还能适当
缩放⻚页⾯面，但是如果之前地址栏是收起
的，此时会展开（解决办法就是
scrollTo(0,1)）。
Android。。。悲剧。。。
13年3月14⽇日星期四
Android下
令⼈人发指的情况出现了：
1，聚焦弹出键盘的时候跳没了！
2，输⼊入的时候，⻚页⾯面上下跳，如果在
横屏模式下，哥都想把⼿手机摔了！
3，在很多⽼老的Android设备上，input聚焦
时，使⽤用的是⾮非webkit创建的⼀一个独⽴立的
“替⾝身”，该替⾝身位置据顶，且⽆无限⾼高的
z-index，不⻦鸟所有样式。
13年3月14⽇日星期四
Android怎么办
如果你的⻚页⾯面body是overflow:hidden的，使⽤用
IScroll等第三⽅方库来模拟⻚页⾯面滚动，那么祝
贺你，你应该不会遇到这样的问题。
但是，如果你的⻚页⾯面是可以原⽣生滚动
的。。。
13年3月14⽇日星期四
Android怎么办
第⼀一诫：不要给input的⽗父级元素加诸如fixed、
translate3d以及backface-visibility:hidden这样的样式。
第⼆二诫：聚焦⼀一定要在click或者touchstart的回调
⾥里去做。
第三诫：调整位置⼀一定要趁热打铁，事件回调
⾥里直接通过类似于如下⽅方式固顶，不要加延
时，否则很多意想不到的情况就会出现，⽐比如
光标消失。。。
var d = $(".search").get(0).getBoundingClientRect().top;
(0, + d);
13年3月14⽇日星期四
