vue监听滚动实现fixed
监听滚动实现固定定位
在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)
}
};注意事项
- 固定定位可能导致页面布局抖动，建议预留占位空间（如用
padding-top）。 - 移动端需考虑兼容性，可结合
touch事件处理。 - 组件销毁时务必移除事件监听，避免内存泄漏。
