滚动变色

<template>
  <div class="wrap">
    <div class="header" :class="{ 'active': headerScroll }"></div>
    <!-- :class="{'active' : headerScroll}" -->
    <h1>dfdfsdf</h1>
    <h1>dfdfsdf</h1>
    <h1>dfdfsdf</h1>
    <h1>dfdfsdf</h1>
    <h1>dfdfsdf</h1>
    <h1>dfdfsdf</h1>
    <h1>dfdfsdf</h1>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref, } from 'vue'
export default defineComponent({
  components: {
  },
  setup() {
    const headerScroll = ref<boolean>(false)


    function pageScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      scrollTop > 100 ? headerScroll.value = true : headerScroll.value = false
    }
    onMounted(() => {
      window.addEventListener('scroll', pageScroll)
    })
    return { headerScroll }
  }
})
</script>

<style lang="less">
.wh(@width, @height) {
  width: @width;
  height: @height;
}

.wrap {
  width: 500px;
  height: 1000px;
  border: 1px solid red;

  .header {
    position: fixed;
    left: 0;
    top: 0;
    // background-color: red;
    border: 1px solid red;
    .wh(100%, 50px)
  }

  .active {
    background: red;
  }
}
</style>