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

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

 <div class="declaration-data" @scroll="handleScroll($event)">
    <div class="declaration-header" :class="nav? 'nav-bg':'nav_nobg'" ref="decl-header">
      <div class="return-left">
        <base-icon
          @click="$router.back(-1)"
          icon-class="arrow-left-s-line"
          style="font-size: 20px;"
        ></base-icon>
        <span style="cursor: pointer" @click="$router.back(-1)">返回</span>
      </div>
      <div align="center" class="declaration-title">餐饮行业主题分析报告</div>
      <div align="center" class="declaration-info">2021年11月</div>
    </div>
</div>

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

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