Vue导航条吸顶效果

需求

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

html

            

                
                

                    关于
                    产品功能
                    APP下载
                    免费注册使用
                
            
        

 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;}