移动端吸顶fixbar的解决方案详解

需求背景

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

问题

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

解决方案

分别处理各个问题：

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属性的元素，其父级高度必须大于sticky元素的高度。

2、sticky元素的底部，不能和父级底部重叠。（这条不好表述，文后详细说明）

3、sticky元素的父级不能含有overflow:hidden 和 overflow:auto 属性

4、必须具有top，或 bottom 属性。

同时要注意，sticky元素仅在他父级容器内有效，超出容器范围则不再生效了。

安卓

滚动距离超过某位置时，js动态设置样式；为了防止惯性滚动引起的fix不及时的情况，在 touchstart、 touchmove 、 touchend 事件都进行监听。

// 注意处理遮罩层的位置  var scrollHandler = function () {    if (topLength < me.getScrollTop()) {      target.css('position', 'fixed');      me.replaceEle.show();    }    else {      target.css('position', 'relative');      me.replaceEle.hide();    }  };  // 安卓情况下，防止惯性滚动引起的fix不及时的情况  if (/(Android)/i.test(navigator.userAgent)) {    $(window).on('scroll', scrollHandler);    $(document.body).on('touchstart', scrollHandler);    $(document.body).on('touchmove', scrollHandler);    $(document.body).on('touchend', function () {      scrollHandler();      setTimeout(scrollHandler, 1000);    });  }