前端实现顶部菜单栏固定javascript+vue

需求介绍：需要固定一个顶部菜单栏，随着屏幕的滚动，顶部菜单栏会始终显示在在顶部（这里使用粘滞定位是不行的，粘滞定位需要固定的结构，不是很符合)

我使用的是vue2+elementUi

分析：

1.通过反复测试，发现可以通过监听滚动事件，当顶部的scroll<一定数值时，顶部的菜单栏会消失

2.这时候我们可以通过吧同样的菜单栏复制出来一份，用vue的v-if控制 当这个顶部菜单栏消失时这个复制出来的显示在顶部，同时设置优先级,这样就可以实现定位

实现代码：

//监听
created(){
    //添加滚动条时间
      window.addEventListener('scroll',this.ScrollEvent,true)
}



//具体方法
//监听订单列表的滚动事件
ScrollEvent() {
    let scrollTop = this.$refs.tableList;
    this.todelieryScrollWidth = scrollTop.$el.getBoundingClientRect().width
    if(scrollTop.$el.getBoundingClientRect().top < -72) {
        this.ShowCtrl = true;
    }else {
        //这里的ShowCtrl 是需要写到html上 可以用v-if控制也可以用v-show
        this.ShowCtrl = false;
    }
},


注：我是把监听写到的created 方法写到了methods 这个看个人习惯

这里需要注意，记得销毁这个监听，不然很浪费资源
destroyed() {
    //销毁滚动条监听事件
      window.removeEventListener('scroll',this.ScrollEvent,true)
}

感谢观看，欢迎交流