当前位置：首页 > VUE

vue实现吸顶

2026-03-30 08:06:26VUE

实现吸顶效果的常见方法

使用CSS的position: sticky属性

在Vue组件中，可以直接为需要吸顶的元素添加CSS样式。这种方法简单高效，无需JavaScript介入。

vue实现吸顶

<template>
  <div class="sticky-header">这是吸顶内容</div>
</template>

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

通过监听滚动事件动态添加类名

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

vue实现吸顶

<template>
  <div :class="{ 'fixed-header': isSticky }">吸顶内容</div>
</template>

<script>
export default {
  data() {
    return {
      isSticky: false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.isSticky = window.scrollY > 100 // 100是触发吸顶的滚动距离
    }
  }
}
</script>

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

使用Intersection Observer API

这种方法性能更好，适合现代浏览器，避免了频繁的滚动事件触发。

<template>
  <div ref="sentinel" style="height: 1px"></div>
  <div :class="{ 'sticky-header': isSticky }">吸顶内容</div>
</template>

<script>
export default {
  data() {
    return {
      isSticky: false
    }
  },
  mounted() {
    const observer = new IntersectionObserver(
      ([entry]) => {
        this.isSticky = !entry.isIntersecting
      },
      { threshold: [1] }
    )
    observer.observe(this.$refs.sentinel)
  }
}
</script>