当前位置：首页 > VUE

vue实现滑动悬停效果

2026-01-22 21:18:12VUE

Vue 实现滑动悬停效果

滑动悬停效果通常指当页面滚动到特定位置时，某个元素固定在视窗的某个位置（如顶部）。以下是几种实现方式：

使用 CSS 的 `position: sticky`

最简单的方法是使用 CSS 的 sticky 定位，无需 JavaScript。

<template>
  <div class="sticky-element">
    <!-- 需要悬停的内容 -->
  </div>
</template>

<style>
.sticky-element {
  position: sticky;
  top: 0; /* 悬停位置 */
  z-index: 100; /* 确保元素在其他内容之上 */
}
</style>

通过 Vue 监听滚动事件

如果需要更复杂的逻辑（如动态计算悬停位置），可以通过 Vue 监听滚动事件实现。

<template>
  <div 
    class="sticky-element" 
    :class="{ 'is-sticky': isSticky }"
    ref="stickyElement"
  >
    <!-- 需要悬停的内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSticky: false,
      stickyOffset: 0,
    };
  },
  mounted() {
    this.stickyOffset = this.$refs.stickyElement.offsetTop;
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.isSticky = window.scrollY > this.stickyOffset;
    },
  },
};
</script>

<style>
.sticky-element {
  position: relative;
}
.sticky-element.is-sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
</style>

使用第三方库（如 `vue-sticky-directive`）

如果需要更简洁的代码，可以使用第三方库。

安装：

npm install vue-sticky-directive

使用：

<template>
  <div v-sticky="stickyOptions">
    <!-- 需要悬停的内容 -->
  </div>
</template>

<script>
import VueStickyDirective from 'vue-sticky-directive';

export default {
  directives: {
    sticky: VueStickyDirective,
  },
  data() {
    return {
      stickyOptions: {
        zIndex: 100,
        stickyTop: 0,
      },
    };
  },
};
</script>

动态悬停位置

如果需要动态调整悬停位置（如避开其他固定元素），可以通过计算属性动态设置。

vue实现滑动悬停效果

<template>
  <div 
    class="sticky-element" 
    :style="{ top: dynamicTop }"
    :class="{ 'is-sticky': isSticky }"
    ref="stickyElement"
  >
    <!-- 需要悬停的内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSticky: false,
      stickyOffset: 0,
      headerHeight: 60, // 其他固定元素高度
    };
  },
  computed: {
    dynamicTop() {
      return this.isSticky ? `${this.headerHeight}px` : '0';
    },
  },
  mounted() {
    this.stickyOffset = this.$refs.stickyElement.offsetTop;
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.isSticky = window.scrollY > this.stickyOffset;
    },
  },
};
</script>

以上方法可以根据需求选择，CSS sticky 最简单，Vue 监听滚动事件更灵活，第三方库则适合快速集成。