当前位置：首页 > VUE

vue监听滚动实现fixed

2026-02-22 02:04:35VUE

监听滚动实现固定定位

在Vue中实现滚动监听并切换元素的fixed定位，可以通过以下方法完成。以导航栏为例，当页面滚动到一定位置时固定导航栏。

方法一：使用v-bind:class动态切换样式

在模板中绑定一个类名，根据滚动位置动态切换：

<template>
  <div :class="{ 'fixed-nav': isFixed }">
    <!-- 导航栏内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFixed: false,
      scrollOffset: 100 // 触发固定的滚动阈值
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.isFixed = window.scrollY > this.scrollOffset;
    }
  }
};
</script>

<style>
.fixed-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
</style>

方法二：直接绑定内联样式

通过计算属性动态生成样式对象：

<template>
  <div :style="navStyle">
    <!-- 导航栏内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollOffset: 100
    };
  },
  computed: {
    navStyle() {
      return {
        position: window.scrollY > this.scrollOffset ? 'fixed' : 'static',
        top: '0',
        width: '100%',
        zIndex: '1000'
      };
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

优化性能：节流处理

高频滚动事件可能影响性能，建议使用节流函数（如lodash.throttle）：

import { throttle } from 'lodash';

export default {
  methods: {
    handleScroll: throttle(function() {
      this.isFixed = window.scrollY > this.scrollOffset;
    }, 100)
  }
};

注意事项