需求背景

經(jīng)常會有這樣的需求，當頁面滾動到某一個位置時，需要某個頁面元素固定在屏幕頂部，并且有時需要連續(xù)滾動吸頂。在PC端主要的實現(xiàn)是通過 CSS 的 position: fixed 屬性，但是在移動端，尤其是在安卓端，存在諸多的兼容性問題。

問題

position：fixed給移動端帶來的問題：

解決方案

分別處理各個問題：

IOS

在IOS端，使用 position： sticky 這個屬性，使用類似于 position: relative 和 position: absolute 的結(jié)合體。在目標區(qū)域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區(qū)域時，它的表現(xiàn)就像position:fixed，它會固定在目標位置。

使用時，需要加上私有前綴

position: -webkit-sticky;position: -moz-sticky;position: -ms-sticky;position: sticky;

對于 position：sticky 的使用，需要注意很多的細節(jié)，sticky滿足以下條件才能生效：

1、具有sticky屬性的元素，其父級高度必須大于sticky元素的高度。

2、sticky元素的底部，不能和父級底部重疊。（這條不好表述，文后詳細說明）

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

4、必須具有top，或 bottom 屬性。

同時要注意，sticky元素僅在他父級容器內(nèi)有效，超出容器范圍則不再生效了。

安卓

滾動距離超過某位置時，js動態(tài)設(shè)置樣式；為了防止慣性滾動引起的fix不及時的情況，在 touchstart、 touchmove 、 touchend 事件都進行監(jiān)聽。

// 注意處理遮罩層的位置  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);    });  }