@hoc-element/affix

📌 Affix 将页面元素固定在可视范围内。
2,569 8
vue affix hoc 固钉 组件化
Install
npm install @hoc-element/affix
Latest Version:1.0.0
Vue:3
Older releases:2
License:MIT
Last Updated:Oct 22, 2026
Links: GitHub  ·  npm
Maintainer: hoc-element-plus

@hoc-element/affix

npm NPM

📌 基于 Webpack 5 构建的 Vue 3.x 固钉组件，用于将页面元素固定在可视范围内。

Live demo: https://pdsuwwz.github.io/hoc-element-affix

Version

Environment Support

  • Vue 3.2.x

Install

npm install @hoc-element/affix

# or

pnpm add @hoc-element/affix

Quick Start

import { createApp } from 'vue'
import HocElementAffix from '@hoc-element/affix'
import App from './App.vue'

createApp(App)
  .use(HocElementAffix)
  .mount('#app')

Feature

  • 支持 Vue 3.x
  • 支持自定义顶部 offsetTop 偏移量
  • 支持固定状态改变触发回调
  • 支持 Slot 插槽式的固定状态反馈

Using

绑定参数 Attributes

字段 说明 类型 默认值
offsetTop （可选）距离窗口顶部多少时开始固定 Number 0

事件 Events

字段 说明 类型
change （可选）固定状态发生改变时的回调函数 Function

插槽数据 Slot

绑定的数据默认在一个对象里，如需要可直接解构再使用

字段 说明 类型 默认值
affixed （可选）实时的固定状态 Boolean false

Demo

下面是比较全的例子，几乎囊括了 API 的所有用法，源码戳这： Code

Related Packages

uniqueway-element

基于 element-ui 库的二次封装，该组件库主要针对现有列表页的 table 表格及 form 表...

1,138
affix vue 组件化 element-ui table upload
@hoc-element/table

📦 A Vue3.x Table Component built on Webpack 5 that follows the Configuration

1,209 38
hoc vue 组件化 element-plus table 表格 高阶组件
@renatodeleao/vue-sticky-directive

A Vue directive wrapping https://github.com/abouolia/sticky-sidebar to make smar...

25,053 17
affix vue directive js sticky stickysidebar
vue22-sticky-directive

A Vue directive wrapping https://github.com/abouolia/sticky-sidebar to make smar...

4,854 17
affix vue directive js sticky stickysidebar
vue-affix-box

A vue plugin to fix the element on your applications

924
affix vue sticky vue-affix vue-affix-box vue-sticky

Version History

Version Released Vue License
1.0.0 >=3.2.0 MIT
0.1.2 ^2.6.12 MIT
0.1.1 ^2.5.17 MIT
0.1.0 ^2.5.17 MIT
0.0.5 ^2.5.17 MIT