Vue中使组件置顶后悬浮

前端用Vue框架做一个网页，有一个需求是，对于头部组件中的SubNav和MenuNav在滑动置顶后需要悬浮在可视区顶部。

网页的主界面为：

需求：

如上图所示的为头部组件结构，目前只是初步搭了一个框架，具体的还没精细

1. SubNav需要固定在顶部

2. 划动页面时，若MenuNav栏置顶，需将其固定在顶部 

想法：

 1. SubNav已经在顶部了，直接固定

 2. MenuNav 通过添加监听事件scroll，获取划动的距离，根据css样式设定的距离，达到值后添加样式进行固定

1.实现SubNav固定

因为考虑到它本身就在顶部，所以我直接选择固定

.subnav{
        display: block;
        background-color: #2370b7;
        margin: 0 0 0 0;
        width: 100%;
        height: 35px;
        position: fixed;
        z-index: 999;
}

 2.MenuNav划至顶端固定

setup中定义了一个布尔变量，navBarFixed 初始为false，Vue对它进行监听，如果它变为true，则动态添加固定的响应样式。 

<div class="nav" :class="navBarFixed == 1 ? 'navBarWrap' : ''">
 
 
setup(){
   let navBarFixed = ref(0)
 
   function handlerScroll(){
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
 
        if(scrollTop >= 82){
              navBarFixed.value = 1
        }else{
              navBarFixed.value = 0
        }
    }
    return {
         navBarFixed,
         handlerScroll
}
 
 
# css
    .navBarWrap {
        width: 70%;
        position:fixed;
        top: 35px;
        z-index:999;
    }