vue 固钉实现
Vue 实现固钉（Affix）效果
固钉（Affix）是一种常见的 UI 交互，当页面滚动时，某个元素会固定在视口的特定位置（如顶部或底部）。以下是几种实现方式：
使用原生滚动监听
通过监听 window.scroll 事件，动态修改元素的定位方式：
// 组件内代码
export default {
data() {
return {
isFixed: false,
offsetTop: 0,
element: null
}
},
mounted() {
this.element = this.$el
this.offsetTop = this.element.offsetTop
window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop
this.isFixed = scrollTop > this.offsetTop
}
}
}<!-- 模板部分 -->
<template>
<div :class="{ 'fixed-class': isFixed }">
<!-- 需要固钉的内容 -->
</div>
</template>使用第三方库（如 vue-affix）
安装 vue-affix 库：
npm install vue-affix使用示例：
import VueAffix from 'vue-affix'
Vue.use(VueAffix)<template>
<vue-affix>
<!-- 需要固钉的内容 -->
</vue-affix>
</template>自定义指令实现
通过 Vue 自定义指令封装固钉逻辑：
Vue.directive('affix', {
inserted(el, binding) {
const offsetTop = el.offsetTop
const onScroll = () => {
const scrollTop = window.pageYOffset
el.classList.toggle('fixed-class', scrollTop > offsetTop)
}
window.addEventListener('scroll', onScroll)
el._onScroll = onScroll
},
unbind(el) {
window.removeEventListener('scroll', el._onScroll)
}
})<template>
<div v-affix>
<!-- 需要固钉的内容 -->
</div>
</template>CSS 粘性定位（Sticky）
现代浏览器支持 position: sticky，无需 JavaScript：
.sticky-element {
position: sticky;
top: 0; /* 触发固定的位置 */
z-index: 100;
}注意事项：
- 父容器不能有
overflow: hidden - 需要指定
top、bottom等阈值 - 兼容性需考虑（IE 不支持）
响应式边界处理
当固钉元素接近容器底部时取消固定：
handleScroll() {
const scrollTop = window.pageYOffset
const containerHeight = this.$el.parentNode.offsetHeight
const elementHeight = this.$el.offsetHeight
const bottomOffset = containerHeight - elementHeight
this.isFixed =
scrollTop > this.offsetTop &&
scrollTop < bottomOffset
}以上方法可根据项目需求选择，原生监听适合简单场景，第三方库提供更多功能，CSS Sticky 最简洁但需考虑兼容性。
