vue网站导航栏吸顶效果

vue网站导航栏吸顶效果

分别是h5部分，script部分，css部分

<template>
    <div ref="header" class="header-container">
        123
    </div>
</template>

mounted() {
      var scrollTop = document.documentElement.scrollTop || 			       document.body.scrollTop || window.pageYOffset
      console.log(scrollTop,'scrollTop')
      window.addEventListener("scroll",this.handleScroll);
      console.log(this.$refs.jwq.offsetHeight,'offset')
},
destroyed() {
      document.removeEventListener('scroll', this.handleScroll)
},
methods: {
	 handleScroll() {
        //吸顶
        const scrollTop = document.documentElement.scrollTop +        	document.body.scrollTop
        console.log(scrollTop,'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'
        }
        //触发动画

      },
}

<style lang="scss" scoped>
  .home{
    &-top{
      .header-container {

        position: fixed;
        top: 0;
        left: 0;
        z-index: 1999;
        width: 100%;
        height: 74px;
        //background: #fff;
        transition: all 0.5s;
        transform: translate3d(0, 0, 0);
      }
      .header-container.not-top {
        background: #fff;
        transform: translate3d(0, -74px, 0);
      }
    }
  }
</style>