20260720172840

2026-07-20 17:28:47 +08:00
1 parent cda7f16d3a
commit 94207c77ff
@@ -0,0 +1,30 @@
+# Basic
+
+## Description (en-US)
+
+The simplest usage.
+
+## Source
+
+```vue
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const top = ref(100)
+const bottom = ref(100)
+</script>
+
+<template>
+  <a-affix :offset-top="top">
+    <a-button type="primary" @click="() => top = top + 10">
+      Affix top
+    </a-button>
+  </a-affix>
+  <br>
+  <a-affix :offset-bottom="bottom">
+    <a-button type="primary" @click="() => bottom = bottom + 10">
+      Affix bottom
+    </a-button>
+  </a-affix>
+</template>
+```
@@ -0,0 +1,17 @@
+# Callback
+
+## Description (en-US)
+
+Callback with affixed state.
+
+## Source
+
+```vue
+<template>
+  <a-affix :offset-top="120" @change="(affixed) => console.log(affixed)">
+    <a-button>
+      120px to affix top
+    </a-button>
+  </a-affix>
+</template>
+```
@@ -0,0 +1,27 @@
+# Container to scroll.
+
+## Description (en-US)
+
+Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+const container = shallowRef()
+</script>
+
+<template>
+  <div ref="container" style="width: 100%;height: 100px;overflow: auto;box-shadow: 0 0 0 1px #1677ff;scrollbar-width: thin;scrollbar-gutter: stable">
+    <div style="width: 100%;height: 1000px">
+      <a-affix :target="() => container">
+        <a-button type="primary">
+          Fixed at the top of container
+        </a-button>
+      </a-affix>
+    </div>
+  </div>
+</template>
+```
@@ -0,0 +1,59 @@
+---
+title: Affix
+description: Stick an element to the viewport.
+---
+
+## When To Use 
+On longer web pages, it's helpful to stick component into the viewport. This is common for menus and actions.
+
+Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
+
+## Demos
+
+| Demo | Path |
+| --- | --- |
+| Basic | demo/basic.md |
+| Callback | demo/on-change.md |
+| Container to scroll. | demo/target.md |
+
+## API
+
+### Props
+
+Common props ref：[Common props](../../docs/vue/common-props.md)
+
+| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
+| --- | --- | --- | --- | --- | --- |
+| offsetTop | Offset from the top of the viewport (in pixels) | number | 0 | - | × |
+| offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - | - | × |
+| target | Specifies the scrollable area DOM node | () =&gt; Window \| HTMLElement \| null | () =&gt; window | - | × |
+
+### Events
+
+| Event | Description | Type | Version |
+| --- | --- | --- | --- |
+| change | Callback for when Affix state is changed | (affixed?: boolean) =&gt; void | - |
+
+### Methods
+
+| Method | Description | Type | Version |
+| --- | --- | --- | --- |
+| updatePosition | - | ReturnType&lt;typeof throttleByAnimationFrame&gt; | - |
+
+**Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:
+
+```html
+<a-affix style="position: absolute;top: y; left: x">...</a-affix>
+```
+
+## FAQ
+
+### When binding container with `target` in Affix, elements sometimes move out of the container. 
+We only listen to container scroll events for performance consideration. You can add custom listeners if you still want to: <https://codesandbox.io/s/stupefied-maxwell-ophqnm?file=/index.js>
+
+Related issues：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
+
+### When Affix is used in a horizontal scroll container, the position of the element `left` is incorrect. 
+Affix is generally only applicable to areas with one-way scrolling, and only supports usage in vertical scrolling containers. If you want to use it in a horizontal container, you can consider implementing with the native `position: sticky` property.
+
+Related issues：[#29108](https://github.com/ant-design/ant-design/issues/29108)
@@ -0,0 +1,26 @@
+# affix Token
+
+Use these variables through `theme.components.Affix`. This document lists definitions only and does not include values.
+
+```vue
+<a-config-provider
+  :theme="{
+    token: {
+      // Global token configuration
+    },
+    components: {
+      Affix: {
+        // Token name: value
+      },
+    },
+  }"
+>
+  ...
+</a-config-provider>
+```
+
+## Token List
+
+| Token | Type | Description |
+| --- | --- | --- |
+| `zIndexPopup` | `number` | z-index of popup |