You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
renovate/major-vueuse-monorepo
feat-4.3
main
renovate/glob-11.x
renovate/date-fns-4.x
renovate/vue-eslint-config-typescript-14.x
renovate/vue-eslint-config-prettier-10.x
renovate/node-22.x
renovate/markdown-it-table-of-contents-0.x
renovate/esbuild-0.x
pages-v4
renovate/vitejs-plugin-vue-jsx-4.x
renovate/major-eslint-monorepo
3.x
feat-4.1
revert-6799-fix-docs-style
feat-v4
tangjinzhou-patch-1
revert-6402-siaikin/fix-in-time
feat-v3.3
revert-5653-patch-1
next
feat-update-ts
cssinjs
feat-css-var
refactor-carousel
refactor-upload
1.x
refactor-cascader
refactor-modal
refactor-notification
refactor-checkbox
doc-form
refactor-input-number
refactor-input
refactor-tabs
refactor-drawer
v2.3
v3-form
2.x
refactor-table
refactor-tree
refactor-date
refactor-trigger
refactor-progress
refactor-mentions
v3-button
chore-vite
refactor-list
sendya-refactor/v3/rate
feat-new-menu
zkwolf-typography
master
feat-less4
feat-dayjs
gh-pages
0.2.1
0.3.1
0.4.0
0.4.1
0.4.2
0.4.3
0.5.0
0.5.1
0.5.2
0.5.3
0.5.4
0.6.0
0.6.1
0.6.2
0.6.3
0.6.4
0.6.5
0.6.6
0.6.7
0.6.8
0.7.0
0.7.1
1.0.0
1.0.1
1.0.2
1.0.3
1.1.0
1.1.0-beta.0
1.1.1
1.1.10
1.1.10-beta
1.1.2
1.1.3
1.1.4
1.1.5
1.1.6
1.1.7
1.1.8
1.1.9
1.2.0
1.2.1
1.2.2
1.2.3
1.2.4
1.2.5
1.3.0
1.3.0-beta.0
1.3.0-beta.1
1.3.1
1.3.10
1.3.14
1.3.15
1.3.16
1.3.17
1.3.17-beta.1
1.3.2
1.3.3
1.3.4
1.3.5
1.3.6
1.3.7
1.3.8
1.3.9
1.4.0
1.4.0-beta.0
1.4.1
1.4.10
1.4.11
1.4.12
1.4.2
1.4.3
1.4.4
1.4.5
1.4.6
1.4.7
1.4.8
1.4.9
1.5.0
1.5.0-alpha.1
1.5.0-beta.1
1.5.0-beta.2
1.5.0-beta.3
1.5.0-rc.1
1.5.0-rc.4
1.5.0-rc.5
1.5.0-rc.6
1.5.0-rc.7
1.5.1
1.5.2
1.5.4
1.5.5
1.6.0
1.6.1
1.6.2
1.6.3
1.6.4
1.6.5
1.7.0
1.7.2
1.7.3
1.7.5
1.7.6
1.7.7
1.7.8
2.0.0
2.0.0-beta.1
2.0.0-beta.10
2.0.0-beta.11
2.0.0-beta.12
2.0.0-beta.13
2.0.0-beta.15
2.0.0-beta.2
2.0.0-beta.3
2.0.0-beta.4
2.0.0-beta.5
2.0.0-beta.6
2.0.0-beta.7
2.0.0-beta.8
2.0.0-beta.9
2.0.0-rc.1
2.0.0-rc.2
2.0.0-rc.3
2.0.0-rc.4
2.0.0-rc.5
2.0.0-rc.6
2.0.0-rc.7
2.0.0-rc.8
2.0.0-rc.9
2.0.1
2.1.0
2.1.1
2.1.2
2.1.3
2.1.4
2.1.6
2.2.0
2.2.0-beta.1
2.2.0-beta.2
2.2.0-beta.3
2.2.0-beta.4
2.2.0-beta.5
2.2.0-beta.6
2.2.0-rc.1
2.2.1
2.2.2
2.2.3
2.2.4
2.2.5
2.2.6
2.2.7
2.2.8
3.0.0-alpha.0
3.0.0-alpha.1
3.0.0-alpha.10
3.0.0-alpha.11
3.0.0-alpha.12
3.0.0-alpha.13
3.0.0-alpha.14
3.0.0-alpha.15
3.0.0-alpha.16
3.0.0-alpha.2
3.0.0-alpha.3
3.0.0-alpha.4
3.0.0-alpha.5
3.0.0-alpha.6
3.0.0-alpha.7
3.0.0-alpha.8
3.0.0-alpha.9
3.0.0-beta.1
3.0.0-beta.10
3.0.0-beta.11
3.0.0-beta.12
3.0.0-beta.13
3.0.0-beta.2
3.0.0-beta.3
3.0.0-beta.4
3.0.0-beta.5
3.0.0-beta.6
3.0.0-beta.7
3.0.0-beta.8
3.0.0-beta.9
3.1.0
3.1.0-rc.0
3.1.0-rc.1
3.1.0-rc.2
3.1.0-rc.3
3.1.0-rc.4
3.1.0-rc.5
3.1.0-rc.6
3.1.1
3.2.0
3.2.1
3.2.10
3.2.11
3.2.12
3.2.13
3.2.14
3.2.15
3.2.16
3.2.18
3.2.19
3.2.2
3.2.20
3.2.3
3.2.4
3.2.5
3.2.6
3.2.7
3.2.8
3.2.9
3.3.0-beta.1
3.3.0-beta.2
3.3.0-beta.3
3.3.0-beta.4
4.0.0
4.0.0-alpha.1
4.0.0-alpha.2
4.0.0-alpha.3
4.0.0-alpha.4
4.0.0-alpha.5
4.0.0-alpha.6
4.0.0-beta.1
4.0.0-beta.2
4.0.0-beta.3
4.0.0-beta.4
4.0.0-rc.1
4.0.0-rc.2
4.0.0-rc.3
4.0.0-rc.4
4.0.0-rc.5
4.0.0-rc.6
4.0.1
4.0.2
4.0.3
4.0.4
4.0.5
4.0.6
4.0.7
4.0.8
4.1.0
4.1.2
4.2.0
4.2.1
4.2.2
4.2.3
4.2.4
4.2.5
4.2.6
${ noResults }
1.6 KiB
1.6 KiB
category | subtitle | type | title | cover |
---|---|---|---|---|
Components | 固钉 | 导航 | Affix | https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg |
将页面元素钉在可视范围。
何时使用
当内容区域比较长,需要滚动页面时,这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
页面可视范围过小时,慎用此功能以免遮挡页面内容。
API
成员 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | ||
offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | ||
target | 设置 Affix 需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数 |
() => HTMLElement | () => window |
事件
事件名称 | 说明 | 回调参数 | 版本 |
---|---|---|---|
change | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |
注意:Affix
内的元素不要使用绝对定位,如需要绝对定位的效果,可以直接设置 Affix
为绝对定位:
<a-affix :style="{ position: 'absolute', top: y, left: x}">
...
</a-affix>
FAQ
Affix 使用 target
绑定容器时,元素会跑到容器外。
从性能角度考虑,我们只监听容器滚动事件。