没有jQuery的Vue.js中带有固定标题的粘性侧边栏

data() {
  return {
    isSidebarFixed: false
  }
}

<template>
  <div>
    <div class="sidebar" :class="{ fixed: isSidebarFixed }">
      <!-- 侧边栏内容 -->
    </div>
    <div class="content">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSidebarFixed: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      const sidebar = document.querySelector('.sidebar')
      const sidebarTop = sidebar.offsetTop
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

      if (scrollTop >= sidebarTop) {
        this.isSidebarFixed = true
      } else {
        this.isSidebarFixed = false
      }
    }
  }
}
</script>

<style>
.fixed {
  position: fixed;
  /* 固定侧边栏的样式 */
}
</style>