vue 如何监测position:sticky;已经生效和未生效

可以使用 Vue.js 的计算属性来监测 position:sticky 是否生效。

首先，可以通过给元素添加一个 ref 属性来获取元素的 DOM 元素：

<template>
  <div ref="sticky">sticky element</div>
</template>

然后，可以在计算属性中使用这个 DOM 元素的 getBoundingClientRect() 方法来获取元素的位置信息，从而判断 position:sticky 是否生效：

<script>
export default {
  computed: {
    sticky() {
      // 获取元素的位置信息
      const { top } = this.$refs.sticky.getBoundingClientRect();
      // 判断是否生效
      return top < 0;
    },
  },
};
</script>

在模板中，就可以使用这个计算属性来进行条件渲染，显示 position:sticky 已经生效或者未生效的信息。

例如：

<template>
  <div ref="sticky">
    <p v-if="sticky">position:sticky 已经生效</p>
    <p v-else>position:sticky 未生效</p>
  </div>
</template>