Affix 固钉

将元素固定在可视区域。

基础用法

向下滚动页面，按钮会固定在顶部。

<script setup>
import { DanAffix, DanButton } from '@dandan-ui/ui'
</script>

<template>
  <div style="padding: 8px 0">
    <p style="margin: 0 0 12px; color: var(--dan-color-text-secondary)">
      向下滚动页面，按钮会固定在顶部。
    </p>
    <DanAffix :offset="80">
      <DanButton type="primary">固钉按钮</DanButton>
    </DanAffix>
  </div>
</template>

Affix Props

属性	说明	类型	默认值
offset	偏移距离	number	0
position	固钉位置	'top' | 'bottom'	'top'
zIndex	层级	number	100
target	滚动容器选择器或元素	string | HTMLElement | null	null（window）

Affix Events

事件	说明	参数
change	固定状态变化	(fixed)
scroll	滚动时	({ scrollTop, fixed })