当前位置：首页 > VUE

vue 固钉实现

2026-01-19 11:21:34VUE

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 库：

vue 固钉实现

npm install vue-affix

使用示例：

import VueAffix from 'vue-affix'
Vue.use(VueAffix)

<template>
  <vue-affix>
    <!-- 需要固钉的内容 -->
  </vue-affix>
</template>

自定义指令实现

通过 Vue 自定义指令封装固钉逻辑：

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 最简洁但需考虑兼容性。

标签: vue