vue中监听页面滚动，给吸顶头部加不同的样式

背景：当页面过长的时候，会出现下拉滚动的情况，头部也被滚动过去了，这时候头部需要吸顶，有的页面头部一开始是一个颜色，滑动的时候是另外一个颜色，这时候要怎么做呢？
1.首先写头部吸顶的样式html部分为：

 

    

      

        
        返回
      
      
餐饮行业主题分析报告
      
2021年11月
    

css部分为：

.declaration-header {
    // padding: 20px $paddingHorizontal 20px;
    padding-top: 20px;
    padding-bottom: 15px;
    color: #fff;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1;

    .declaration-title {
      margin-bottom: 8px;
      font-size: 20px;
    }

    .declaration-info {
      font-size: 12px;
    }
    .return-left {
      display: flex;
      // align-items: center;
      padding-left: 15px;
    }
  }
  .nav-bg {
    background: #5174fa;
  }
  .nav_nobg {
    background: none;
  }

js部分代码为：

//滚动事件
const handleScroll = (event) => {
  //获取导航到顶部的距离
  let scrollTop =event.srcElement.scrollTop;
  console.log(scrollTop);
  if (scrollTop == 0) {
    nav.value = false;
  } else {
    nav.value = true;
  }
};
const nav = ref(false);

原理：当滚动的时候，在事件里给定义好的变量赋予不同的值，页面上根据不同的值判断赋予不同的样式