当前位置：首页 > VUE

vue 固钉实现

2026-02-20 03:42:25VUE

实现 Vue 固钉（Affix）功能

固钉（Affix）是一种常见的 UI 交互效果，当页面滚动时，某个元素会固定在视口的某个位置。以下是几种实现 Vue 固钉的方法：

使用 CSS `position: sticky`

最简单的方式是利用 CSS 的 position: sticky 属性。这种方式不需要 JavaScript，性能较好，但兼容性需注意（IE 不支持）。

<template>
  <div class="affix-container">
    <div class="affix-content">
      <!-- 需要固钉的内容 -->
    </div>
  </div>
</template>

<style>
.affix-content {
  position: sticky;
  top: 0; /* 距离顶部的距离 */
  z-index: 100; /* 确保在其他元素上方 */
}
</style>

自定义 Vue 指令实现

通过监听滚动事件动态修改元素的 position 属性，实现更灵活的固钉逻辑。

<template>
  <div v-affix="{ offset: 100 }">
    <!-- 需要固钉的内容 -->
  </div>
</template>

<script>
export default {
  directives: {
    affix: {
      mounted(el, binding) {
        const offset = binding.value?.offset || 0;
        const originalOffset = el.getBoundingClientRect().top + window.pageYOffset;

        function handleScroll() {
          if (window.pageYOffset >= originalOffset - offset) {
            el.style.position = 'fixed';
            el.style.top = `${offset}px`;
          } else {
            el.style.position = '';
            el.style.top = '';
          }
        }

        window.addEventListener('scroll', handleScroll);
        el._affixScrollHandler = handleScroll;
      },
      unmounted(el) {
        window.removeEventListener('scroll', el._affixScrollHandler);
      }
    }
  }
};
</script>

使用第三方库（如 `vue-affix`）

如果需要更复杂的功能（如响应式断点、多目标固钉），可以使用专门的 Vue 库。

安装依赖：

npm install vue-affix

示例代码：

<template>
  <vue-affix relative-element-selector="#container" :offset="{ top: 50 }">
    <!-- 需要固钉的内容 -->
  </vue-affix>
</template>

<script>
import VueAffix from 'vue-affix';
export default {
  components: { VueAffix }
};
</script>