可以使用 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>