移动端吸顶fixbar如何实现自适应不同屏幕尺寸的解决方案？

本文共计1882个文字，预计阅读时间需要8分钟。

要求背景+常见需求，页面滚动到特定位置时，需要某个页面元素固定在屏幕顶部，并可能需要持续滚动吸顶。PC端主要通过CSS的`position: fixed`属性实现，但移动端实现方式不同。

需求背景

经常会有这样的需求，当页面滚动到某一个位置时，需要某个页面元素固定在屏幕顶部，并且有时需要连续滚动吸顶。在PC端主要的实现是通过 CSS 的 position: fixed 属性，但是在移动端，尤其是在安卓端，存在诸多的兼容性问题。

问题

position：fixed给移动端带来的问题：

• IOS8在页面滚动时，吸顶不连续；页面滑动时，不见吸顶，页面滚动停止后，吸顶缓慢出现
• 滚动到顶部之后，会出现两个一样的吸顶, 过一会才恢复正常。
• footer底部输入框 focus 状态，footer 底部输入框被居中，而不是吸附在软键盘上部。
• iPhone 4s&5 / iOS 6&7 / Safari 下，页面底部footer输入框失去焦点时，header定位出错。当页面有滚动动作时，header定位恢复正常。
• iPhone 4 / iOS 5 / Safari下，当页面发生跳转，再退回时，fixed区域消失，当内容获得焦点时，fixed区域才显示。
• 安卓低版本／自带浏览器，不支持fixed属性，iOS4 也是不支持 fixed 的。
• 三星i9100(S2) / 自带浏览器，在滚屏过程中，fixed定位异常，touchend之后恢复正常。