Vue导航条吸顶效果

需求

官网首页，导航条一开始隐藏，往下滑动鼠标，就出现导航栏（如不需要一开始隐藏，直接去掉class "clearfix" 即可 ）

html
<header id="boxFixed" class="clearfix" :class="{'is_fixed' : isFixed}">
            <section class="header-box">
                <img src="./src/logo2.png" alt="">
                <nav>
                    <a>关于</a>
                    <a>产品功能</a>
                    <a>APP下载</a>
                    <a>免费注册使用</a>
                </nav>
            </section>
        </header>

 export default {
    data(){
      return {
        isFixed: false,
        offsetTop:0
      }
    },
    mounted(){
      window.addEventListener('scroll',this.initHeight);
      this.$nextTick( () => {
        this.offsetTop = document.querySelector('#boxFixed').offsetTop;
      })
    },
    methods:{
      initHeight () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        this.isFixed = scrollTop > this.offsetTop ? true : false;
      },
    },
    destroyed () {
      window.removeEventListener('scroll', this.handleScroll)
    },
  }
style
.clearfix{
display:none;
}
.isFixed{
position:fixed;
top:0;
left:0;
z-index:2;}