移动端 H5 tab吸顶的需求

需求：
内容：广告位区域，tab切换区域，内容区域；
效果：需要向上滑动的时候，广告位隐藏，tab吸顶展示；下拉刷新后，广告位显示，tab取消吸顶。
页面：

分析：
1.监听广告位向上滑动的高度，到达一定高度时，广告位隐藏，tab吸顶展示，内容区正常滑动。利用addEventListener() 方法，监听滚动方法

     <div
          v-show="tabsStyle !== 'ceiling'"
          ref="pronbit"
          class="card-img"
        >
          <img
            src="图片地址"
            alt=""
          >
        </div>

 mounted() {
        this.$nextTick(() => {
          window.addEventListener('scroll', this.handleScrollx, true);
        });
    }
    //离开当前页面的时候记得销毁
    destroyed() {
      window.removeEventListener('scroll', this.handleScrollx);
    },

handleScrollx() {
		// 获取目标标签距离顶部的距离
        const top = this.$refs.pronbit.getBoundingClientRect().top;
        if (top < -160 || top === 0) {
         // 隐藏广告位，并且 tab 吸顶
          this.tabsStyle = 'ceiling';
        }
      },

设置吸顶的方法：tab用的是vanUi的van-tabs
（1）利用position: fixed;，固定tab; 问题：内容区的内容会顶上去一个广告位的高度，所以需要在吸顶的同时给内容区设置高度marTop 
.ceiling /deep/ .van-tabs__wrap {
  position: fixed;
  z-index: 2;
  width: 100%;
  top: 60px;
}
.marTop {
  margin-top: 50px;
}
（2）利用 position: sticky;  注意：父div设置relative定位；这样设置内容区不会顶上去
.ceiling  {
  position: relative;
}
.ceiling /deep/ .van-tabs__wrap {
  position: sticky;
  z-index: 2;
  width: 100%;
  top: 0;
}

注意：在内容没有铺满屏幕时，安卓不会向上滚动，但是ios浏览器会页面上下滚动 (橡皮筋效果)，所以得禁止这种滚动的情况
处理：
（1）用fixed定位来解决 (没用过）
（2）阻止body的touchmove事件 ，在某个条件满足时，设置禁止滑动（但是会影响下拉刷新，暂时没解决）

 document.body.addEventListener('touchmove', function (e) {
            e.preventDefault(); // 阻止默认的处理方式(阻止下拉滑动的效果)
          }, {passive: false});