vue滑动页面菜单栏置顶

效果：

1、在mounted函数内添加：

  mounted () {
    this.$nextTick(() => {
      window.addEventListener('scroll', this.topTab)
    })
  }

 this.$nextTick为了节约浏览器资源

2、topTab函数：

topTab () {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 获取滚动值
    if (scrollTop > this.offsetTop + 5) { // 稍微提前一点触发，可以不写
      this.$refs.scrollBox['className'] = 'toptab'
      this.$refs.scrollBox['style'].top = scrollTop - scrollTop + 'px'
    } else {
      this.$refs.scrollBox['className'] = '' // 取消置顶
    }
  }

3、css：

  .toptab {
    position: sticky;
    z-index: 2;
    width: 100%;
  }

注：

到此为止，已经有滑动页面菜单栏吸顶效果。在pc端是流畅的，但是手机端有问题：滑动到顶部之后，菜单栏才会停留在预定位置。

原因是pc上的浏览器JS轮询50毫秒以下，手机浏览器JS轮询因为省电及其他原因，降到1S甚至更高。

所以添加属性： position: sticky

position: sticky 在屏幕范围时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

position: sticky可以直接添加到菜单栏元素上，有同样效果，不必添加topTab函数

由于是新属性，会有兼容性问题，js解决兼容性问题详见：

https://www.cnblogs.com/cjh1111/p/7246977.html

4、vue销毁时，移除监听：

destroyed () {
    window.removeEventListener('scroll', this.topTab)
  }

避免影响其他页面