当前位置：首页 > VUE

vue实现滚动吸顶

2026-01-22 02:15:52VUE

Vue 实现滚动吸顶的方法

使用 CSS 的 `position: sticky`

CSS 的 position: sticky 是实现滚动吸顶的最简单方式，无需额外 JavaScript 代码。

<template>
  <div class="sticky-header">
    <!-- 需要吸顶的内容 -->
  </div>
</template>

<style>
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white; /* 避免内容穿透 */
}
</style>

position: sticky 的兼容性较好，但在某些旧版本浏览器中可能需要前缀。确保父容器有足够的高度，否则可能无法生效。

监听滚动事件实现吸顶

如果需要更复杂的逻辑控制，可以通过监听滚动事件动态切换样式。

<template>
  <div ref="header" :class="{ 'fixed-header': isFixed }">
    <!-- 需要吸顶的内容 -->
  </div>
</template>

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

<style>
.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background: white;
}
</style>

通过 offsetTop 获取元素初始位置，滚动时动态添加 fixed-header 类。注意在组件销毁时移除事件监听。

使用第三方库

如果需要更复杂的功能（如多元素吸顶或动画效果），可以使用第三方库如 vue-sticky-directive 或 vue-sticky。

安装 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,
        backgroundColor: '#fff'
      }
    };
  }
};
</script>