吸顶处理兼容iOS和Android_h5 定位属性sticky 在安卓手机的兼容性

问题抛出

当页面上滑时，顶部当导航需要进行吸顶处理。滑动过程使用scroll事件监听，当滚动的高度到底一定时，便设置样式 absolute:fixed；top:0px;以吸顶处理。

以上处理在安卓中时完全没有问题的，但是在iOS中缺会出现严重的样式问题：页面滚动过程中并不吸顶。

解决思路

针对iOS做兼容处理。iOS支持一个特殊的定位方式:absolute:sticky;//粘性定位。

sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

div.sticky {
   
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}
1
2
3
4
5
6
7
8

解决办法

判断设备类型

const judgeUserAgent = function () {
   
  if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
   
    return 'ios'
  } else if (/(Android)/i.test(navigator.userAgent)) {
   
    return 'android'
  } else {
   
    return 'pc'
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

安卓的吸顶处理

positionSticky (el, top = 0, zIndex = 10) {
   
  
1
2