Basic Usage (基本使用)

Offset top 30px

<script lang="ts" setup>
</script>

<template>
  <div class="space-y-3">
    <hi-affix :offset="30">
      <div class="px-6 text-white inline-flex border-box justify-center py-2 bg-blue-3 rounded-3">
        Offset top 30px
      </div>
    </hi-affix>
  </div>
</template>

Target Container (指定容器)

Offset top 30px with container

This is a container with 150px height

<script lang="ts" setup>
</script>

<template>
  <div class="space-y-3 affix-container h-90 of-y-auto w-full">
    <hi-affix :offset="30" target=".affix-container">
      <div class="px-6 text-white inline-flex border-box justify-center py-2 bg-blue-3 rounded-3">
        Offset top 30px with container
      </div>
    </hi-affix>
    <div class="w-full h-150 flex items-end">
      This is a container with 150px height
    </div>
  </div>
</template>

Fixed Position (固定的相对方向)

Offset bottom 30px

<script lang="ts" setup>
</script>

<template>
  <div class="space-y-3">
    <hi-affix :offset="30" position="bottom">
      <div class="px-6 text-white inline-flex border-box justify-center py-2 bg-blue-3 rounded-3">
        Offset bottom 30px
      </div>
    </hi-affix>
  </div>
</template>

Affix Props (参数)

Name	Type	Default	Description
offset	number	0	距离达到指定偏移量后触发
target	string	window	指定容器
position	'top' | 'position'	'top'	固定的相对方向
z-index	number	998	z-index 值