移动端吸顶fixbar解决方案详解：兼容性问题和解决方法

移动端吸顶fixbar的解决方案详解 在移动端开发中，实现吸顶fixbar是一个普遍存在的问题，特别是在安卓端，存在诸多的兼容性问题。本文将对移动端吸顶fixbar的解决方案进行详解。 一、问题背景 在移动端开发中，经常会有这样的需求，当页面滚动到某一个位置时，需要某个页面元素固定在屏幕顶部，并且有时需要连续滚动吸顶。在PC端主要的实现是通过CSS的position:fixed属性，但是在移动端，尤其是在安卓端，存在诸多的兼容性问题。 二、problem position：fixed给移动端带来的问题： 1. IOS8在页面滚动时，吸顶不连续；页面滑动时，不见吸顶，页面滚动停止后，吸顶缓慢出现。 2. 滚动到顶部之后，会出现两个一样的吸顶，过一会才恢复正常。 3. footer底部输入框focus状态，footer底部输入框被居中，而不是吸附在软键盘上部。 4. iPhone 4s&5 / iOS 6&7/Safari下，页面底部footer输入框失去焦点时，header定位出错。当页面有滚动动作时，header定位恢复正常。 5. iPhone 4/iOS 5/Safari下，当页面发生跳转，再退回时，fixed区域消失，当内容获得焦点时，fixed区域才显示。 6. 安卓低版本／自带浏览器，不支持fixed属性，iOS 4也是不支持fixed的。 7. 三星i9100(S2)/自带浏览器，在滚屏过程中，fixed定位异常，touchend之后恢复正常。 8. 部分低版本Android对支持不好，videoposter属性设置的封面图会遮挡fixed元素。 9. QQ、UC浏览器滚动页面时footer定位错误，会往上偏移，是由于地址栏收起的缘故。 三、解决方案 分别处理各个问题： IOS 在IOS端，使用position：sticky这个属性，使用类似于position:relative和position:absolute的结合体。在目标区域在屏幕中可见时，它的行为就像position:relative;而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。 使用时，需要加上私有前缀 position:-webkit-sticky; position:-moz-sticky; position:-ms-sticky; position:sticky; 对于position：sticky的使用，需要注意很多的细节，sticky满足以下条件才能生效： 1. 具有sticky属性的元素，其父级高度必须大于元素自身的高度。 2. sticky元素不能是fixed或absolute定位的元素。 3. sticky元素不能是display：inline或display：inline-block的元素。 安卓 在安卓端，使用 JavaScript 来模拟fixed的行为，可以使用iscroll库或其他类似库来实现fixed的效果。 移动端吸顶fixbar的解决方案需要根据不同的浏览器和操作系统版本进行针对性的解决，需要认真分析问题的根源，选择合适的解决方案。