vue3 监听滚动事件 达到一定高度 dom元素浮动

可以使用Vue3中的`@scroll`事件监听滚动事件，然后通过计算滚动距离来判断是否需要让DOM元素浮动。

下面是一个简单的实现示例：

<template>
  <div class="container" @scroll="handleScroll">
    <div class="content"></div>
    <div class="float-element" :class="{ 'float': isFloating }"></div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const isFloating = ref(false);

    const handleScroll = (event) => {
      const scrollTop = event.target.scrollTop;
      if (scrollTop > 100) { // 判断滚动距离是否大于100px
        isFloating.value = true; // 让DOM元素浮动
      } else {
        isFloating.value = false; // 取消DOM元素浮动
      }
    };

    return {
      isFloating,
      handleScroll,
    };
  },
};
</script>

<style>
.container {
  position: relative;
  height: 400px;
  overflow-y: scroll;
}

.content {
  height: 1000px;
}

.float-element {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background-color: #ccc;
  transition: all 0.3s ease-in-out;
}

.float {
  top: 20px;
  background-color: red;
}
</style>

在上面的代码中，我们通过`@scroll`事件监听滚动事件，并在`handleScroll`函数中计算滚动距离，然后根据滚动距离的大小来决定是否让DOM元素浮动。

当滚动距离大于100px时，我们通过`isFloating`变量来控制DOM元素的`float`属性，实现让DOM元素浮动的效果。注意，这里使用了Vue3中的`ref`函数来创建响应式变量`isFloating`。