ホーム エクスプローラ ヘルプ
登録 サインイン
wicresoft
/
doc_project
2
0
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ツリー: 9cd9c7d1d5
ブランチ タグ
doc_project
/
2x.antv.design
/
assets
/
index.524fbecf.js

index.524fbecf.js 60 KB
履歴 Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373 
  1. import{_ as i,k,a as v,n as I,d as m,r as C,j as e,l as h,w as s,f as p,e as t,b as n}from"./index.c1b9962e.js";const A={pageData:{title:"Affix",description:"",frontmatter:{category:"Components",subtitle:"\u56FA\u9489",type:"\u5BFC\u822A",title:"Affix",cover:"https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg"},headers:[{level:2,title:"\u4F55\u65F6\u4F7F\u7528",slug:"\u4F55\u65F6\u4F7F\u7528",content:"\u5F53\u5185\u5BB9\u533A\u57DF\u6BD4\u8F83\u957F\uFF0C\u9700\u8981\u6EDA\u52A8\u9875\u9762\u65F6\uFF0C\u8FD9\u90E8\u5206\u5185\u5BB9\u5BF9\u5E94\u7684\u64CD\u4F5C\u6216\u8005\u5BFC\u822A\u9700\u8981\u5728\u6EDA\u52A8\u8303\u56F4\u5185\u59CB\u7EC8\u5C55\u73B0\u3002\u5E38\u7528\u4E8E\u4FA7\u8FB9\u83DC\u5355\u548C\u6309\u94AE\u7EC4\u5408\u3002"},{level:2,title:"API",slug:"api",content:""},{level:3,title:"\u4E8B\u4EF6",slug:"\u4E8B\u4EF6",content:""},{level:2,title:"FAQ",slug:"faq",content:"Affix \u4F7F\u7528 `target` \u7ED1\u5B9A\u5BB9\u5668\u65F6\uFF0C\u5143\u7D20\u4F1A\u8DD1\u5230\u5BB9\u5668\u5916\u3002"},{level:3,title:"Affix \u4F7F\u7528 target \u7ED1\u5B9A\u5BB9\u5668\u65F6\uFF0C\u5143\u7D20\u4F1A\u8DD1\u5230\u5BB9\u5668\u5916\u3002",slug:"affix-\u4F7F\u7528-target-\u7ED1\u5B9A\u5BB9\u5668\u65F6\uFF0C\u5143\u7D20\u4F1A\u8DD1\u5230\u5BB9\u5668\u5916\u3002",content:"\u4ECE\u6027\u80FD\u89D2\u5EA6\u8003\u8651\uFF0C\u6211\u4EEC\u53EA\u76D1\u542C\u5BB9\u5668\u6EDA\u52A8\u4E8B\u4EF6\u3002"}],relativePath:"src/docs/affix/index.zh-CN.md",content:`
    2. 

  2. \u5C06\u9875\u9762\u5143\u7D20\u9489\u5728\u53EF\u89C6\u8303\u56F4\u3002
    3. 

  3. 

  4. ## \u4F55\u65F6\u4F7F\u7528
    5. 

  5. 

  6. \u5F53\u5185\u5BB9\u533A\u57DF\u6BD4\u8F83\u957F\uFF0C\u9700\u8981\u6EDA\u52A8\u9875\u9762\u65F6\uFF0C\u8FD9\u90E8\u5206\u5185\u5BB9\u5BF9\u5E94\u7684\u64CD\u4F5C\u6216\u8005\u5BFC\u822A\u9700\u8981\u5728\u6EDA\u52A8\u8303\u56F4\u5185\u59CB\u7EC8\u5C55\u73B0\u3002\u5E38\u7528\u4E8E\u4FA7\u8FB9\u83DC\u5355\u548C\u6309\u94AE\u7EC4\u5408\u3002
    7. 

  7. 

  8. \u9875\u9762\u53EF\u89C6\u8303\u56F4\u8FC7\u5C0F\u65F6\uFF0C\u614E\u7528\u6B64\u529F\u80FD\u4EE5\u514D\u906E\u6321\u9875\u9762\u5185\u5BB9\u3002
    9. 

  9. 

  10. ## API
    11. 

  11. 

  12. | \u6210\u5458 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |
    13. 

  13. | --- | --- | --- | --- | --- |
    14. 

  14. | offsetBottom | \u8DDD\u79BB\u7A97\u53E3\u5E95\u90E8\u8FBE\u5230\u6307\u5B9A\u504F\u79FB\u91CF\u540E\u89E6\u53D1 | number |  |  |
    15. 

  15. | offsetTop | \u8DDD\u79BB\u7A97\u53E3\u9876\u90E8\u8FBE\u5230\u6307\u5B9A\u504F\u79FB\u91CF\u540E\u89E6\u53D1 | number |  |  |
    16. 

  16. | target | \u8BBE\u7F6E \`Affix\` \u9700\u8981\u76D1\u542C\u5176\u6EDA\u52A8\u4E8B\u4EF6\u7684\u5143\u7D20\uFF0C\u503C\u4E3A\u4E00\u4E2A\u8FD4\u56DE\u5BF9\u5E94 DOM \u5143\u7D20\u7684\u51FD\u6570 | () => HTMLElement | () => window |  |
    17. 

  17. 

  18. ### \u4E8B\u4EF6
    19. 

  19. 

  20. | \u4E8B\u4EF6\u540D\u79F0 | \u8BF4\u660E                         | \u56DE\u8C03\u53C2\u6570          | \u7248\u672C |
    21. 

  21. | -------- | ---------------------------- | ----------------- | ---- |
    22. 

  22. | change   | \u56FA\u5B9A\u72B6\u6001\u6539\u53D8\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570 | Function(affixed) | \u65E0   |  |
    23. 

  23. 

  24. **\u6CE8\u610F\uFF1A**\`Affix\` \u5185\u7684\u5143\u7D20\u4E0D\u8981\u4F7F\u7528\u7EDD\u5BF9\u5B9A\u4F4D\uFF0C\u5982\u9700\u8981\u7EDD\u5BF9\u5B9A\u4F4D\u7684\u6548\u679C\uFF0C\u53EF\u4EE5\u76F4\u63A5\u8BBE\u7F6E \`Affix\` \u4E3A\u7EDD\u5BF9\u5B9A\u4F4D\uFF1A
    25. 

  25. 

  26. \`\`\`html
    27. 

  27. <a-affix :style="{ position: 'absolute', top: y, left: x}">
    28. 

  28.   ...
    29. 

  29. </a-affix>
    30. 

  30. \`\`\`
    31. 

  31. 

  32. ## FAQ
    33. 

  33. 

  34. ### Affix \u4F7F\u7528 \`target\` \u7ED1\u5B9A\u5BB9\u5668\u65F6\uFF0C\u5143\u7D20\u4F1A\u8DD1\u5230\u5BB9\u5668\u5916\u3002
    35. 

  35. 

  36. \u4ECE\u6027\u80FD\u89D2\u5EA6\u8003\u8651\uFF0C\u6211\u4EEC\u53EA\u76D1\u542C\u5BB9\u5668\u6EDA\u52A8\u4E8B\u4EF6\u3002
    37. 

  37. 

  38. \u76F8\u5173 issue\uFF1A[#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)
    39. 

  39. `,html:`<p>\u5C06\u9875\u9762\u5143\u7D20\u9489\u5728\u53EF\u89C6\u8303\u56F4\u3002</p>
    40. 

  40. <h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528</h2>
    41. 

  41. <p>\u5F53\u5185\u5BB9\u533A\u57DF\u6BD4\u8F83\u957F\uFF0C\u9700\u8981\u6EDA\u52A8\u9875\u9762\u65F6\uFF0C\u8FD9\u90E8\u5206\u5185\u5BB9\u5BF9\u5E94\u7684\u64CD\u4F5C\u6216\u8005\u5BFC\u822A\u9700\u8981\u5728\u6EDA\u52A8\u8303\u56F4\u5185\u59CB\u7EC8\u5C55\u73B0\u3002\u5E38\u7528\u4E8E\u4FA7\u8FB9\u83DC\u5355\u548C\u6309\u94AE\u7EC4\u5408\u3002</p>
    42. 

  42. <p>\u9875\u9762\u53EF\u89C6\u8303\u56F4\u8FC7\u5C0F\u65F6\uFF0C\u614E\u7528\u6B64\u529F\u80FD\u4EE5\u514D\u906E\u6321\u9875\u9762\u5185\u5BB9\u3002</p>
    43. 

  43. <h2 id="api">API</h2>
    44. 

  44. <table>
    45. 

  45. <thead>
    46. 

  46. <tr>
    47. 

  47. <th>\u6210\u5458</th>
    48. 

  48. <th>\u8BF4\u660E</th>
    49. 

  49. <th>\u7C7B\u578B</th>
    50. 

  50. <th>\u9ED8\u8BA4\u503C</th>
    51. 

  51. <th>\u7248\u672C</th>
    52. 

  52. </tr>
    53. 

  53. </thead>
    54. 

  54. <tbody>
    55. 

  55. <tr>
    56. 

  56. <td>offsetBottom</td>
    57. 

  57. <td>\u8DDD\u79BB\u7A97\u53E3\u5E95\u90E8\u8FBE\u5230\u6307\u5B9A\u504F\u79FB\u91CF\u540E\u89E6\u53D1</td>
    58. 

  58. <td>number</td>
    59. 

  59. <td></td>
    60. 

  60. <td></td>
    61. 

  61. </tr>
    62. 

  62. <tr>
    63. 

  63. <td>offsetTop</td>
    64. 

  64. <td>\u8DDD\u79BB\u7A97\u53E3\u9876\u90E8\u8FBE\u5230\u6307\u5B9A\u504F\u79FB\u91CF\u540E\u89E6\u53D1</td>
    65. 

  65. <td>number</td>
    66. 

  66. <td></td>
    67. 

  67. <td></td>
    68. 

  68. </tr>
    69. 

  69. <tr>
    70. 

  70. <td>target</td>
    71. 

  71. <td>\u8BBE\u7F6E <code>Affix</code> \u9700\u8981\u76D1\u542C\u5176\u6EDA\u52A8\u4E8B\u4EF6\u7684\u5143\u7D20\uFF0C\u503C\u4E3A\u4E00\u4E2A\u8FD4\u56DE\u5BF9\u5E94 DOM \u5143\u7D20\u7684\u51FD\u6570</td>
    72. 

  72. <td>() =&gt; HTMLElement</td>
    73. 

  73. <td>() =&gt; window</td>
    74. 

  74. <td></td>
    75. 

  75. </tr>
    76. 

  76. </tbody>
    77. 

  77. </table>
    78. 

  78. <h3 id="\u4E8B\u4EF6">\u4E8B\u4EF6</h3>
    79. 

  79. <table>
    80. 

  80. <thead>
    81. 

  81. <tr>
    82. 

  82. <th>\u4E8B\u4EF6\u540D\u79F0</th>
    83. 

  83. <th>\u8BF4\u660E</th>
    84. 

  84. <th>\u56DE\u8C03\u53C2\u6570</th>
    85. 

  85. <th>\u7248\u672C</th>
    86. 

  86. </tr>
    87. 

  87. </thead>
    88. 

  88. <tbody>
    89. 

  89. <tr>
    90. 

  90. <td>change</td>
    91. 

  91. <td>\u56FA\u5B9A\u72B6\u6001\u6539\u53D8\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570</td>
    92. 

  92. <td>Function(affixed)</td>
    93. 

  93. <td>\u65E0</td>
    94. 

  94. </tr>
    95. 

  95. </tbody>
    96. 

  96. </table>
    97. 

  97. <p><strong>\u6CE8\u610F\uFF1A</strong><code>Affix</code> \u5185\u7684\u5143\u7D20\u4E0D\u8981\u4F7F\u7528\u7EDD\u5BF9\u5B9A\u4F4D\uFF0C\u5982\u9700\u8981\u7EDD\u5BF9\u5B9A\u4F4D\u7684\u6548\u679C\uFF0C\u53EF\u4EE5\u76F4\u63A5\u8BBE\u7F6E <code>Affix</code> \u4E3A\u7EDD\u5BF9\u5B9A\u4F4D\uFF1A</p>
    98. 

  98. <pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-affix</span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ position: 'absolute', top: y, left: x}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    99. 

  99.   ...
    100. 

  100. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-affix</span><span class="token punctuation">></span></span>
    101. 

  101. </code></pre>
    102. 

  102. <h2 id="faq">FAQ</h2>
    103. 

  103. <h3 id="affix-\u4F7F\u7528-target-\u7ED1\u5B9A\u5BB9\u5668\u65F6\uFF0C\u5143\u7D20\u4F1A\u8DD1\u5230\u5BB9\u5668\u5916\u3002">Affix \u4F7F\u7528 <code>target</code> \u7ED1\u5B9A\u5BB9\u5668\u65F6\uFF0C\u5143\u7D20\u4F1A\u8DD1\u5230\u5BB9\u5668\u5916\u3002</h3>
    104. 

  104. <p>\u4ECE\u6027\u80FD\u89D2\u5EA6\u8003\u8651\uFF0C\u6211\u4EEC\u53EA\u76D1\u542C\u5BB9\u5668\u6EDA\u52A8\u4E8B\u4EF6\u3002</p>
    105. 

  105. <p>\u76F8\u5173 issue\uFF1A<a href="https://github.com/ant-design/ant-design/issues/3938" target="_blank" rel="noopener noreferrer">#3938</a> <a href="https://github.com/ant-design/ant-design/issues/5642" target="_blank" rel="noopener noreferrer">#5642</a> <a href="https://github.com/ant-design/ant-design/issues/16120" target="_blank" rel="noopener noreferrer">#16120</a></p>
    106. 

  106. `,lastUpdated:1748059052597}},x={class:"markdown"};function w(o,a,r,d,g,f){return k(),v("article",x,a[0]||(a[0]=[I(`<p>\u5C06\u9875\u9762\u5143\u7D20\u9489\u5728\u53EF\u89C6\u8303\u56F4\u3002</p><h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528</h2><p>\u5F53\u5185\u5BB9\u533A\u57DF\u6BD4\u8F83\u957F\uFF0C\u9700\u8981\u6EDA\u52A8\u9875\u9762\u65F6\uFF0C\u8FD9\u90E8\u5206\u5185\u5BB9\u5BF9\u5E94\u7684\u64CD\u4F5C\u6216\u8005\u5BFC\u822A\u9700\u8981\u5728\u6EDA\u52A8\u8303\u56F4\u5185\u59CB\u7EC8\u5C55\u73B0\u3002\u5E38\u7528\u4E8E\u4FA7\u8FB9\u83DC\u5355\u548C\u6309\u94AE\u7EC4\u5408\u3002</p><p>\u9875\u9762\u53EF\u89C6\u8303\u56F4\u8FC7\u5C0F\u65F6\uFF0C\u614E\u7528\u6B64\u529F\u80FD\u4EE5\u514D\u906E\u6321\u9875\u9762\u5185\u5BB9\u3002</p><h2 id="api">API</h2><table><thead><tr><th>\u6210\u5458</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>offsetBottom</td><td>\u8DDD\u79BB\u7A97\u53E3\u5E95\u90E8\u8FBE\u5230\u6307\u5B9A\u504F\u79FB\u91CF\u540E\u89E6\u53D1</td><td>number</td><td></td><td></td></tr><tr><td>offsetTop</td><td>\u8DDD\u79BB\u7A97\u53E3\u9876\u90E8\u8FBE\u5230\u6307\u5B9A\u504F\u79FB\u91CF\u540E\u89E6\u53D1</td><td>number</td><td></td><td></td></tr><tr><td>target</td><td>\u8BBE\u7F6E <code>Affix</code> \u9700\u8981\u76D1\u542C\u5176\u6EDA\u52A8\u4E8B\u4EF6\u7684\u5143\u7D20\uFF0C\u503C\u4E3A\u4E00\u4E2A\u8FD4\u56DE\u5BF9\u5E94 DOM \u5143\u7D20\u7684\u51FD\u6570</td><td>() =&gt; HTMLElement</td><td>() =&gt; window</td><td></td></tr></tbody></table><h3 id="\u4E8B\u4EF6">\u4E8B\u4EF6</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>change</td><td>\u56FA\u5B9A\u72B6\u6001\u6539\u53D8\u65F6\u89E6\u53D1\u7684\u56DE\u8C03\u51FD\u6570</td><td>Function(affixed)</td><td>\u65E0</td></tr></tbody></table><p><strong>\u6CE8\u610F\uFF1A</strong><code>Affix</code> \u5185\u7684\u5143\u7D20\u4E0D\u8981\u4F7F\u7528\u7EDD\u5BF9\u5B9A\u4F4D\uFF0C\u5982\u9700\u8981\u7EDD\u5BF9\u5B9A\u4F4D\u7684\u6548\u679C\uFF0C\u53EF\u4EE5\u76F4\u63A5\u8BBE\u7F6E <code>Affix</code> \u4E3A\u7EDD\u5BF9\u5B9A\u4F4D\uFF1A</p><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-affix</span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ position: &#39;absolute&#39;, top: y, left: x}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    107. 

  107.   ...
    108. 

  108. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-affix</span><span class="token punctuation">&gt;</span></span>
    109. 

  109. </code></pre><h2 id="faq">FAQ</h2><h3 id="affix-\u4F7F\u7528-target-\u7ED1\u5B9A\u5BB9\u5668\u65F6\uFF0C\u5143\u7D20\u4F1A\u8DD1\u5230\u5BB9\u5668\u5916\u3002">Affix \u4F7F\u7528 <code>target</code> \u7ED1\u5B9A\u5BB9\u5668\u65F6\uFF0C\u5143\u7D20\u4F1A\u8DD1\u5230\u5BB9\u5668\u5916\u3002</h3><p>\u4ECE\u6027\u80FD\u89D2\u5EA6\u8003\u8651\uFF0C\u6211\u4EEC\u53EA\u76D1\u542C\u5BB9\u5668\u6EDA\u52A8\u4E8B\u4EF6\u3002</p><p>\u76F8\u5173 issue\uFF1A<a href="https://github.com/ant-design/ant-design/issues/3938" target="_blank" rel="noopener noreferrer">#3938</a> <a href="https://github.com/ant-design/ant-design/issues/5642" target="_blank" rel="noopener noreferrer">#5642</a> <a href="https://github.com/ant-design/ant-design/issues/16120" target="_blank" rel="noopener noreferrer">#16120</a></p>`,14)]))}var y=i(A,[["render",w]]);const Z={pageData:{title:"Affix",description:"",frontmatter:{category:"Components",type:"Navigation",title:"Affix",cover:"https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg"},headers:[{level:2,title:"When To Use",slug:"when-to-use",content:"On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions."},{level:2,title:"API",slug:"api",content:""},{level:3,title:"events",slug:"events",content:""},{level:2,title:"FAQ",slug:"faq",content:"Affix bind container with `target`, sometime move out of container."},{level:3,title:"Affix bind container with target, sometime move out of container.",slug:"affix-bind-container-with-target-sometime-move-out-of-container",content:"We don't listen window scroll for performance consideration."}],relativePath:"src/docs/affix/index.en-US.md",content:`
    110. 

  110. Wrap Affix around another component to make it stick the viewport.
    111. 

  111. 

  112. ## When To Use
    113. 

  113. 

  114. On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions.
    115. 

  115. 

  116. Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
    117. 

  117. 

  118. ## API
    119. 

  119. 

  120. | Property | Description | Type | Default | Version |
    121. 

  121. | --- | --- | --- | --- | --- |
    122. 

  122. | offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - |  |
    123. 

  123. | offsetTop | Offset from the top of the viewport (in pixels) | number | 0 |  |
    124. 

  124. | target | Specifies the scrollable area DOM node | () =&gt; HTMLElement | () =&gt; window |  |
    125. 

  125. 

  126. ### events
    127. 

  127. 

  128. | Events Name | Description                              | Arguments         | Version |
    129. 

  129. | ----------- | ---------------------------------------- | ----------------- | ------- |
    130. 

  130. | change      | Callback for when Affix state is changed | Function(affixed) |
    131. 

  131. 

  132. **Note:** Children of \`Affix\` must not have the property \`position: absolute\`, but you can set \`position: absolute\` on \`Affix\` itself:
    133. 

  133. 

  134. \`\`\`html
    135. 

  135. &lt;a-affix :style=&quot;{ position: &#39;absolute&#39;, top: y, left: x}&quot;&gt;
    136. 

  136.   ...
    137. 

  137. &lt;/a-affix&gt;
    138. 

  138. \`\`\`
    139. 

  139. 

  140. ## FAQ
    141. 

  141. 

  142. ### Affix bind container with \`target\`, sometime move out of container.
    143. 

  143. 

  144. We don&#39;t listen window scroll for performance consideration.
    145. 

  145. 

  146. Related issues\uFF1A[#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)
    147. 

  147. `,html:`<p>Wrap Affix around another component to make it stick the viewport.</p>
    148. 

  148. <h2 id="when-to-use">When To Use</h2>
    149. 

  149. <p>On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions.</p>
    150. 

  150. <p>Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.</p>
    151. 

  151. <h2 id="api">API</h2>
    152. 

  152. <table>
    153. 

  153. <thead>
    154. 

  154. <tr>
    155. 

  155. <th>Property</th>
    156. 

  156. <th>Description</th>
    157. 

  157. <th>Type</th>
    158. 

  158. <th>Default</th>
    159. 

  159. <th>Version</th>
    160. 

  160. </tr>
    161. 

  161. </thead>
    162. 

  162. <tbody>
    163. 

  163. <tr>
    164. 

  164. <td>offsetBottom</td>
    165. 

  165. <td>Offset from the bottom of the viewport (in pixels)</td>
    166. 

  166. <td>number</td>
    167. 

  167. <td>-</td>
    168. 

  168. <td></td>
    169. 

  169. </tr>
    170. 

  170. <tr>
    171. 

  171. <td>offsetTop</td>
    172. 

  172. <td>Offset from the top of the viewport (in pixels)</td>
    173. 

  173. <td>number</td>
    174. 

  174. <td>0</td>
    175. 

  175. <td></td>
    176. 

  176. </tr>
    177. 

  177. <tr>
    178. 

  178. <td>target</td>
    179. 

  179. <td>Specifies the scrollable area DOM node</td>
    180. 

  180. <td>() =&gt; HTMLElement</td>
    181. 

  181. <td>() =&gt; window</td>
    182. 

  182. <td></td>
    183. 

  183. </tr>
    184. 

  184. </tbody>
    185. 

  185. </table>
    186. 

  186. <h3 id="events">events</h3>
    187. 

  187. <table>
    188. 

  188. <thead>
    189. 

  189. <tr>
    190. 

  190. <th>Events Name</th>
    191. 

  191. <th>Description</th>
    192. 

  192. <th>Arguments</th>
    193. 

  193. <th>Version</th>
    194. 

  194. </tr>
    195. 

  195. </thead>
    196. 

  196. <tbody>
    197. 

  197. <tr>
    198. 

  198. <td>change</td>
    199. 

  199. <td>Callback for when Affix state is changed</td>
    200. 

  200. <td>Function(affixed)</td>
    201. 

  201. <td></td>
    202. 

  202. </tr>
    203. 

  203. </tbody>
    204. 

  204. </table>
    205. 

  205. <p><strong>Note:</strong> Children of <code>Affix</code> must not have the property <code>position: absolute</code>, but you can set <code>position: absolute</code> on <code>Affix</code> itself:</p>
    206. 

  206. <pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-affix</span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{ position: 'absolute', top: y, left: x}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    207. 

  207.   ...
    208. 

  208. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-affix</span><span class="token punctuation">></span></span>
    209. 

  209. </code></pre>
    210. 

  210. <h2 id="faq">FAQ</h2>
    211. 

  211. <h3 id="affix-bind-container-with-target-sometime-move-out-of-container">Affix bind container with <code>target</code>, sometime move out of container.</h3>
    212. 

  212. <p>We don't listen window scroll for performance consideration.</p>
    213. 

  213. <p>Related issues\uFF1A<a href="https://github.com/ant-design/ant-design/issues/3938" target="_blank" rel="noopener noreferrer">#3938</a> <a href="https://github.com/ant-design/ant-design/issues/5642" target="_blank" rel="noopener noreferrer">#5642</a> <a href="https://github.com/ant-design/ant-design/issues/16120" target="_blank" rel="noopener noreferrer">#16120</a></p>
    214. 

  214. `,lastUpdated:1748059052596}},B={class:"markdown"};function G(o,a,r,d,g,f){return k(),v("article",B,a[0]||(a[0]=[I(`<p>Wrap Affix around another component to make it stick the viewport.</p><h2 id="when-to-use">When To Use</h2><p>On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions.</p><p>Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.</p><h2 id="api">API</h2><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th><th>Version</th></tr></thead><tbody><tr><td>offsetBottom</td><td>Offset from the bottom of the viewport (in pixels)</td><td>number</td><td>-</td><td></td></tr><tr><td>offsetTop</td><td>Offset from the top of the viewport (in pixels)</td><td>number</td><td>0</td><td></td></tr><tr><td>target</td><td>Specifies the scrollable area DOM node</td><td>() =&gt; HTMLElement</td><td>() =&gt; window</td><td></td></tr></tbody></table><h3 id="events">events</h3><table><thead><tr><th>Events Name</th><th>Description</th><th>Arguments</th><th>Version</th></tr></thead><tbody><tr><td>change</td><td>Callback for when Affix state is changed</td><td>Function(affixed)</td><td></td></tr></tbody></table><p><strong>Note:</strong> Children of <code>Affix</code> must not have the property <code>position: absolute</code>, but you can set <code>position: absolute</code> on <code>Affix</code> itself:</p><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-affix</span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ position: &#39;absolute&#39;, top: y, left: x}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    215. 

  215.   ...
    216. 

  216. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-affix</span><span class="token punctuation">&gt;</span></span>
    217. 

  217. </code></pre><h2 id="faq">FAQ</h2><h3 id="affix-bind-container-with-target-sometime-move-out-of-container">Affix bind container with <code>target</code>, sometime move out of container.</h3><p>We don&#39;t listen window scroll for performance consideration.</p><p>Related issues\uFF1A<a href="https://github.com/ant-design/ant-design/issues/3938" target="_blank" rel="noopener noreferrer">#3938</a> <a href="https://github.com/ant-design/ant-design/issues/5642" target="_blank" rel="noopener noreferrer">#5642</a> <a href="https://github.com/ant-design/ant-design/issues/16120" target="_blank" rel="noopener noreferrer">#16120</a></p>`,14)]))}var W=i(Z,[["render",G]]);const H=m({setup(){const o=C(10),a=C(10);return{top:o,bottom:a}}});function Y(o,a,r,d,g,f){const c=e("a-button"),u=e("a-affix"),l=e("demo-box");return k(),h(l,{jsfiddle:{us:"The simplest usage.",cn:"\u6700\u7B80\u5355\u7684\u7528\u6CD5\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
    218. 

  218. <p>\u6700\u7B80\u5355\u7684\u7528\u6CD5\u3002</p>
    219. 

  219. <h2 id="en-us">en-US</h2>
    220. 

  220. <p>The simplest usage.</p>
    221. 

  221. `,order:0,title:{"zh-CN":"\u57FA\u672C","en-US":"Basic"},relativePath:"src/docs/affix/demo/basic.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWFmZml4IDpvZmZzZXQtdG9wPSJ0b3AiPgogICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljaz0idG9wICs9IDEwIj5BZmZpeCB0b3A8L2EtYnV0dG9uPgogIDwvYS1hZmZpeD4KICA8YnIgLz4KICA8YS1hZmZpeCA6b2Zmc2V0LWJvdHRvbT0iYm90dG9tIj4KICAgIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9ImJvdHRvbSArPSAxMCI+QWZmaXggYm90dG9tPC9hLWJ1dHRvbj4KICA8L2EtYWZmaXg+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCB0b3AgPSByZWY8bnVtYmVyPigxMCk7CiAgICBjb25zdCBib3R0b20gPSByZWY8bnVtYmVyPigxMCk7CiAgICByZXR1cm4gewogICAgICB0b3AsCiAgICAgIGJvdHRvbSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWFmZml4IDpvZmZzZXQtdG9wPSJ0b3AiPgogICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiIEBjbGljaz0idG9wICs9IDEwIj5BZmZpeCB0b3A8L2EtYnV0dG9uPgogIDwvYS1hZmZpeD4KICA8YnIgLz4KICA8YS1hZmZpeCA6b2Zmc2V0LWJvdHRvbT0iYm90dG9tIj4KICAgIDxhLWJ1dHRvbiB0eXBlPSJwcmltYXJ5IiBAY2xpY2s9ImJvdHRvbSArPSAxMCI+QWZmaXggYm90dG9tPC9hLWJ1dHRvbj4KICA8L2EtYWZmaXg+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IHRvcCA9IHJlZigxMCk7CiAgICBjb25zdCBib3R0b20gPSByZWYoMTApOwogICAgcmV0dXJuIHsKICAgICAgdG9wLAogICAgICBib3R0b20sCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:s(()=>[p(u,{"offset-top":o.top},{default:s(()=>[p(c,{type:"primary",onClick:a[0]||(a[0]=b=>o.top+=10)},{default:s(()=>a[2]||(a[2]=[t("Affix top")])),_:1,__:[2]})]),_:1},8,["offset-top"]),a[4]||(a[4]=n("br",null,null,-1)),p(u,{"offset-bottom":o.bottom},{default:s(()=>[p(c,{type:"primary",onClick:a[1]||(a[1]=b=>o.bottom+=10)},{default:s(()=>a[3]||(a[3]=[t("Affix bottom")])),_:1,__:[3]})]),_:1},8,["offset-bottom"])]),htmlCode:s(()=>a[5]||(a[5]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    222. 

  222.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-affix")]),t(),n("span",{class:"token attr-name"},":offset-top"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("top"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    223. 

  223.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("top += 10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Affix top"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    224. 

  224.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-affix")]),n("span",{class:"token punctuation"},">")]),t(`
    225. 

  225.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    226. 

  226.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-affix")]),t(),n("span",{class:"token attr-name"},":offset-bottom"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("bottom"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    227. 

  227.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("bottom += 10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Affix bottom"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    228. 

  228.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-affix")]),n("span",{class:"token punctuation"},">")]),t(`
    229. 

  229. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    230. 

  230. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
    231. 

  231. `),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
    232. 

  232. `),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
    233. 

  233.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    234. 

  234.     `),n("span",{class:"token keyword"},"const"),t(" top "),n("span",{class:"token operator"},"="),t(" ref"),n("span",{class:"token operator"},"<"),t("number"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token number"},"10"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    235. 

  235.     `),n("span",{class:"token keyword"},"const"),t(" bottom "),n("span",{class:"token operator"},"="),t(" ref"),n("span",{class:"token operator"},"<"),t("number"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token number"},"10"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    236. 

  236.     `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
    237. 

  237.       top`),n("span",{class:"token punctuation"},","),t(`
    238. 

  238.       bottom`),n("span",{class:"token punctuation"},","),t(`
    239. 

  239.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    240. 

  240.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
    241. 

  241. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    242. 

  242. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
    243. 

  243. `)])],-1)])),jsVersionHtml:s(()=>a[6]||(a[6]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    244. 

  244.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-affix")]),t(),n("span",{class:"token attr-name"},":offset-top"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("top"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    245. 

  245.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("top += 10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Affix top"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    246. 

  246.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-affix")]),n("span",{class:"token punctuation"},">")]),t(`
    247. 

  247.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    248. 

  248.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-affix")]),t(),n("span",{class:"token attr-name"},":offset-bottom"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("bottom"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    249. 

  249.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("bottom += 10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Affix bottom"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    250. 

  250.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-affix")]),n("span",{class:"token punctuation"},">")]),t(`
    251. 

  251. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    252. 

  252. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
    253. 

  253. `),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
    254. 

  254. `),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
    255. 

  255.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    256. 

  256.     `),n("span",{class:"token keyword"},"const"),t(" top "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token number"},"10"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    257. 

  257.     `),n("span",{class:"token keyword"},"const"),t(" bottom "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token number"},"10"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    258. 

  258.     `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
    259. 

  259.       top`),n("span",{class:"token punctuation"},","),t(`
    260. 

  260.       bottom`),n("span",{class:"token punctuation"},","),t(`
    261. 

  261.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    262. 

  262.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
    263. 

  263. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    264. 

  264. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
    265. 

  265. `)])],-1)])),_:1})}var V=i(H,[["render",Y]]);const X=m({setup(){return{change:a=>{console.log(a)}}}});function _(o,a,r,d,g,f){const c=e("a-button"),u=e("a-affix"),l=e("demo-box");return k(),h(l,{jsfiddle:{us:"Callback with affixed state.",cn:"\u53EF\u4EE5\u83B7\u5F97\u662F\u5426\u56FA\u5B9A\u7684\u72B6\u6001\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
    266. 

  266. <p>\u53EF\u4EE5\u83B7\u5F97\u662F\u5426\u56FA\u5B9A\u7684\u72B6\u6001\u3002</p>
    267. 

  267. <h2 id="en-us">en-US</h2>
    268. 

  268. <p>Callback with affixed state.</p>
    269. 

  269. `,order:1,title:{"zh-CN":"\u56FA\u5B9A\u72B6\u6001\u6539\u53D8\u7684\u56DE\u8C03","en-US":"Callback"},relativePath:"src/docs/affix/demo/on-change.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWFmZml4IDpvZmZzZXQtdG9wPSIxMjAiIEBjaGFuZ2U9ImNoYW5nZSI+CiAgICA8YS1idXR0b24+MTIwcHggdG8gYWZmaXggdG9wPC9hLWJ1dHRvbj4KICA8L2EtYWZmaXg+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgY2hhbmdlID0gKGFmZml4ZWQ6IGJvb2xlYW4pID0+IHsKICAgICAgY29uc29sZS5sb2coYWZmaXhlZCk7CiAgICB9OwoKICAgIHJldHVybiB7CiAgICAgIGNoYW5nZSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWFmZml4IDpvZmZzZXQtdG9wPSIxMjAiIEBjaGFuZ2U9ImNoYW5nZSI+CiAgICA8YS1idXR0b24+MTIwcHggdG8gYWZmaXggdG9wPC9hLWJ1dHRvbj4KICA8L2EtYWZmaXg+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBjaGFuZ2UgPSBhZmZpeGVkID0+IHsKICAgICAgY29uc29sZS5sb2coYWZmaXhlZCk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgY2hhbmdlLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[p(u,{"offset-top":120,onChange:o.change},{default:s(()=>[p(c,null,{default:s(()=>a[0]||(a[0]=[t("120px to affix top")])),_:1,__:[0]})]),_:1},8,["onChange"])]),htmlCode:s(()=>a[1]||(a[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    270. 

  270.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-affix")]),t(),n("span",{class:"token attr-name"},":offset-top"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("120"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("change"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    271. 

  271.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t("120px to affix top"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    272. 

  272.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-affix")]),n("span",{class:"token punctuation"},">")]),t(`
    273. 

  273. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    274. 

  274. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
    275. 

  275. `),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
    276. 

  276. `),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
    277. 

  277.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    278. 

  278.     `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"change"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"affixed"),n("span",{class:"token operator"},":"),t(" boolean")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
    279. 

  279.       console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),t("affixed"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    280. 

  280.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    281. 

  281. 

  282.     `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
    283. 

  283.       change`),n("span",{class:"token punctuation"},","),t(`
    284. 

  284.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    285. 

  285.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
    286. 

  286. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    287. 

  287. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
    288. 

  288. `)])],-1)])),jsVersionHtml:s(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    289. 

  289.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-affix")]),t(),n("span",{class:"token attr-name"},":offset-top"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("120"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("change"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    290. 

  290.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t("120px to affix top"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    291. 

  291.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-affix")]),n("span",{class:"token punctuation"},">")]),t(`
    292. 

  292. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    293. 

  293. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
    294. 

  294. `),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
    295. 

  295. `),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
    296. 

  296.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    297. 

  297.     `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"change"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"affixed"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
    298. 

  298.       console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),t("affixed"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    299. 

  299.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    300. 

  300.     `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
    301. 

  301.       change`),n("span",{class:"token punctuation"},","),t(`
    302. 

  302.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    303. 

  303.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
    304. 

  304. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    305. 

  305. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
    306. 

  306. `)])],-1)])),_:1})}var j=i(X,[["render",_]]);const R=m({setup(){return{containerRef:C()}}}),P={id:"components-affix-demo-target",ref:"containerRef",class:"scrollable-container"},F={class:"background"};function J(o,a,r,d,g,f){const c=e("a-button"),u=e("a-affix"),l=e("demo-box");return k(),h(l,{jsfiddle:{us:"Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).",cn:"\u7528 `target` \u8BBE\u7F6E `Affix` \u9700\u8981\u76D1\u542C\u5176\u6EDA\u52A8\u4E8B\u4EF6\u7684\u5143\u7D20\uFF0C\u9ED8\u8BA4\u4E3A `window`\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
    307. 

  307. <p>\u7528 <code>target</code> \u8BBE\u7F6E <code>Affix</code> \u9700\u8981\u76D1\u542C\u5176\u6EDA\u52A8\u4E8B\u4EF6\u7684\u5143\u7D20\uFF0C\u9ED8\u8BA4\u4E3A <code>window</code>\u3002</p>
    308. 

  308. <h2 id="en-us">en-US</h2>
    309. 

  309. <p>Set a <code>target</code> for 'Affix', which is listen to scroll event of target element (default is <code>window</code>).</p>
    310. 

  310. `,order:2,title:{"zh-CN":"\u6EDA\u52A8\u5BB9\u5668","en-US":"Container to scroll."},relativePath:"src/docs/affix/demo/target.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXYgaWQ9ImNvbXBvbmVudHMtYWZmaXgtZGVtby10YXJnZXQiIHJlZj0iY29udGFpbmVyUmVmIiBjbGFzcz0ic2Nyb2xsYWJsZS1jb250YWluZXIiPgogICAgPGRpdiBjbGFzcz0iYmFja2dyb3VuZCI+CiAgICAgIDxhLWFmZml4IDp0YXJnZXQ9IigpID0+IGNvbnRhaW5lclJlZiI+CiAgICAgICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiPkZpeGVkIGF0IHRoZSB0b3Agb2YgY29udGFpbmVyPC9hLWJ1dHRvbj4KICAgICAgPC9hLWFmZml4PgogICAgPC9kaXY+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiwgVk5vZGUgfSBmcm9tICd2dWUnOwoKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IGNvbnRhaW5lclJlZiA9IHJlZjxWTm9kZT4oKTsKICAgIHJldHVybiB7CiAgICAgIGNvbnRhaW5lclJlZiwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pgo8c3R5bGU+CiNjb21wb25lbnRzLWFmZml4LWRlbW8tdGFyZ2V0LnNjcm9sbGFibGUtY29udGFpbmVyIHsKICBoZWlnaHQ6IDEwMHB4OwogIG92ZXJmbG93LXk6IHNjcm9sbDsKfQojY29tcG9uZW50cy1hZmZpeC1kZW1vLXRhcmdldCAuYmFja2dyb3VuZCB7CiAgcGFkZGluZy10b3A6IDYwcHg7CiAgaGVpZ2h0OiAzMDBweDsKICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJ2h0dHBzOi8vem9zLmFsaXBheW9iamVjdHMuY29tL3Jtc3BvcnRhbC9SbWp3UWlKb3JLeW9idkkuanBnJyk7Cn0KPC9zdHlsZT4K",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXYgaWQ9ImNvbXBvbmVudHMtYWZmaXgtZGVtby10YXJnZXQiIHJlZj0iY29udGFpbmVyUmVmIiBjbGFzcz0ic2Nyb2xsYWJsZS1jb250YWluZXIiPgogICAgPGRpdiBjbGFzcz0iYmFja2dyb3VuZCI+CiAgICAgIDxhLWFmZml4IDp0YXJnZXQ9IigpID0+IGNvbnRhaW5lclJlZiI+CiAgICAgICAgPGEtYnV0dG9uIHR5cGU9InByaW1hcnkiPkZpeGVkIGF0IHRoZSB0b3Agb2YgY29udGFpbmVyPC9hLWJ1dHRvbj4KICAgICAgPC9hLWFmZml4PgogICAgPC9kaXY+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IGNvbnRhaW5lclJlZiA9IHJlZigpOwogICAgcmV0dXJuIHsKICAgICAgY29udGFpbmVyUmVmLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+CjxzdHlsZT4KI2NvbXBvbmVudHMtYWZmaXgtZGVtby10YXJnZXQuc2Nyb2xsYWJsZS1jb250YWluZXIgewogIGhlaWdodDogMTAwcHg7CiAgb3ZlcmZsb3cteTogc2Nyb2xsOwp9CiNjb21wb25lbnRzLWFmZml4LWRlbW8tdGFyZ2V0IC5iYWNrZ3JvdW5kIHsKICBwYWRkaW5nLXRvcDogNjBweDsKICBoZWlnaHQ6IDMwMHB4OwogIGJhY2tncm91bmQtaW1hZ2U6IHVybCgnaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL1JtandRaUpvckt5b2J2SS5qcGcnKTsKfQo8L3N0eWxlPg=="}},{default:s(()=>[n("div",P,[n("div",F,[p(u,{target:()=>o.containerRef},{default:s(()=>[p(c,{type:"primary"},{default:s(()=>a[0]||(a[0]=[t("Fixed at the top of container")])),_:1,__:[0]})]),_:1},8,["target"])])],512)]),htmlCode:s(()=>a[1]||(a[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    311. 

  311.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),t(),n("span",{class:"token attr-name"},"id"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("components-affix-demo-target"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"ref"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("containerRef"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("scrollable-container"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    312. 

  312.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),t(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("background"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    313. 

  313.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-affix")]),t(),n("span",{class:"token attr-name"},":target"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("() => containerRef"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    314. 

  314.         `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Fixed at the top of container"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    315. 

  315.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-affix")]),n("span",{class:"token punctuation"},">")]),t(`
    316. 

  316.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    317. 

  317.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    318. 

  318. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    319. 

  319. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
    320. 

  320. `),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref"),n("span",{class:"token punctuation"},","),t(" VNode "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
    321. 

  321. 

  322. `),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
    323. 

  323.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    324. 

  324.     `),n("span",{class:"token keyword"},"const"),t(" containerRef "),n("span",{class:"token operator"},"="),t(" ref"),n("span",{class:"token operator"},"<"),t("VNode"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    325. 

  325.     `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
    326. 

  326.       containerRef`),n("span",{class:"token punctuation"},","),t(`
    327. 

  327.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    328. 

  328.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
    329. 

  329. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    330. 

  330. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
    331. 

  331. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[t(`
    332. 

  332. `),n("span",{class:"token selector"},"#components-affix-demo-target.scrollable-container"),t(),n("span",{class:"token punctuation"},"{"),t(`
    333. 

  333.   `),n("span",{class:"token property"},"height"),n("span",{class:"token punctuation"},":"),t(" 100px"),n("span",{class:"token punctuation"},";"),t(`
    334. 

  334.   `),n("span",{class:"token property"},"overflow-y"),n("span",{class:"token punctuation"},":"),t(" scroll"),n("span",{class:"token punctuation"},";"),t(`
    335. 

  335. `),n("span",{class:"token punctuation"},"}"),t(`
    336. 

  336. `),n("span",{class:"token selector"},"#components-affix-demo-target .background"),t(),n("span",{class:"token punctuation"},"{"),t(`
    337. 

  337.   `),n("span",{class:"token property"},"padding-top"),n("span",{class:"token punctuation"},":"),t(" 60px"),n("span",{class:"token punctuation"},";"),t(`
    338. 

  338.   `),n("span",{class:"token property"},"height"),n("span",{class:"token punctuation"},":"),t(" 300px"),n("span",{class:"token punctuation"},";"),t(`
    339. 

  339.   `),n("span",{class:"token property"},"background-image"),n("span",{class:"token punctuation"},":"),t(),n("span",{class:"token url"},[n("span",{class:"token function"},"url"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string url"},"'https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg'"),n("span",{class:"token punctuation"},")")]),n("span",{class:"token punctuation"},";"),t(`
    340. 

  340. `),n("span",{class:"token punctuation"},"}"),t(`
    341. 

  341. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("style")]),n("span",{class:"token punctuation"},">")]),t(`
    342. 

  342. `)])],-1)])),jsVersionHtml:s(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    343. 

  343.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),t(),n("span",{class:"token attr-name"},"id"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("components-affix-demo-target"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"ref"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("containerRef"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("scrollable-container"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    344. 

  344.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),t(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("background"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    345. 

  345.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-affix")]),t(),n("span",{class:"token attr-name"},":target"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("() => containerRef"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    346. 

  346.         `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Fixed at the top of container"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    347. 

  347.       `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-affix")]),n("span",{class:"token punctuation"},">")]),t(`
    348. 

  348.     `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    349. 

  349.   `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    350. 

  350. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    351. 

  351. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
    352. 

  352. `),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
    353. 

  353. `),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
    354. 

  354.   `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    355. 

  355.     `),n("span",{class:"token keyword"},"const"),t(" containerRef "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    356. 

  356.     `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
    357. 

  357.       containerRef`),n("span",{class:"token punctuation"},","),t(`
    358. 

  358.     `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    359. 

  359.   `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
    360. 

  360. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    361. 

  361. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
    362. 

  362. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("style")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[t(`
    363. 

  363. `),n("span",{class:"token selector"},"#components-affix-demo-target.scrollable-container"),t(),n("span",{class:"token punctuation"},"{"),t(`
    364. 

  364.   `),n("span",{class:"token property"},"height"),n("span",{class:"token punctuation"},":"),t(" 100px"),n("span",{class:"token punctuation"},";"),t(`
    365. 

  365.   `),n("span",{class:"token property"},"overflow-y"),n("span",{class:"token punctuation"},":"),t(" scroll"),n("span",{class:"token punctuation"},";"),t(`
    366. 

  366. `),n("span",{class:"token punctuation"},"}"),t(`
    367. 

  367. `),n("span",{class:"token selector"},"#components-affix-demo-target .background"),t(),n("span",{class:"token punctuation"},"{"),t(`
    368. 

  368.   `),n("span",{class:"token property"},"padding-top"),n("span",{class:"token punctuation"},":"),t(" 60px"),n("span",{class:"token punctuation"},";"),t(`
    369. 

  369.   `),n("span",{class:"token property"},"height"),n("span",{class:"token punctuation"},":"),t(" 300px"),n("span",{class:"token punctuation"},";"),t(`
    370. 

  370.   `),n("span",{class:"token property"},"background-image"),n("span",{class:"token punctuation"},":"),t(),n("span",{class:"token url"},[n("span",{class:"token function"},"url"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string url"},"'https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg'"),n("span",{class:"token punctuation"},")")]),n("span",{class:"token punctuation"},";"),t(`
    371. 

  371. `),n("span",{class:"token punctuation"},"}"),t(`
    372. 

  372. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("style")]),n("span",{class:"token punctuation"},">")]),t(`
    373. 

  373. `)])],-1)])),_:1})}var D=i(R,[["render",J]]);const S=m({CN:y,US:W,components:{Basic:V,OnChange:j,Traget:D}});function K(o,a,r,d,g,f){const c=e("basic"),u=e("on-change"),l=e("traget"),b=e("demo-sort");return k(),h(b,null,{default:s(()=>[p(c),p(u),p(l)]),_:1})}var N=i(S,[["render",K]]);export{N as default};
    374.