VUE—屏幕向上滚动到一定高度，导航栏向上慢慢消失（动画）

<div ref="header" class="header-container"> // header 设置ref

mounted() {
     
    document.addEventListener('scroll', this.onScroll)
  },
  beforeDestroy() {
     
    document.removeEventListener('scroll', this.onScroll)
  },
  methods: {
     
    onScroll() {
     
      const scrollTop =
        document.documentElement.scrollTop + document.body.scrollTop
      const headerDom = this.$refs.header
      if (scrollTop >= 160) {
     
        if (!headerDom.getAttribute('class').includes('not-top')) {
     
          headerDom.className = 'header-container not-top' // 添加类名 css里设置动画
        }
      } else {
     
        headerDom.className = 'header-container'
      }
    }
  }

.header-container {
     
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1999;
  width: 100%;
  height: 74px;
  background: $opacity-color9;
  transition: all 0.2s;
  transform: translate3d(0, 0, 0);
  &.not-top {
     
    transform: translate3d(0, -74px, 0);
  }
}