Preview Updated 2026-05-10

Affix

Switch an element to fixed positioning when it scrolls past — handy for sticky toolbars, anchors, or submit bars.

Basic usage

offsetTop sets the pixel offset from the container top once pinned; offsetBottom does the opposite. target specifies the scroll container; omit it to listen on window.

背景

前置文字 1

前置文字 2

前置文字 3

前置文字 4

前置文字 5

前置文字 6

后置文字 1

后置文字 2

后置文字 3

后置文字 4

后置文字 5

后置文字 6

后置文字 7

后置文字 8

后置文字 9

后置文字 10

后置文字 11

后置文字 12

后置文字 13

后置文字 14

后置文字 15

后置文字 16

后置文字 17

后置文字 18

后置文字 19

后置文字 20

后置文字 21

后置文字 22

后置文字 23

后置文字 24

后置文字 25

后置文字 26

后置文字 27

后置文字 28

后置文字 29

后置文字 30

<script setup lang="ts">
import { CfAffix, CfButton } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-affix-root" style="height: 400px; overflow-y: auto; border: 1px solid var(--line-1); border-radius: 8px; padding: 12px;">
    <p v-for="i in 6" :key="`a-${i}`">前置文字 {{ i }}</p>
    <CfAffix :offset-top="0" target=".demo-affix-root">
      <div style="background: var(--bg-2); padding: 8px; border: 1px solid var(--accent-1); border-radius: 6px;">
        <CfButton size="sm">滚动到这里时这一行会吸顶</CfButton>
      </div>
    </CfAffix>
    <p v-for="i in 30" :key="`b-${i}`">后置文字 {{ i }}</p>
  </div>
</template>

<div className="scroll-root" style={{ height: 400, overflowY: 'auto' }}>
<CfAffix offsetTop={0} target=".scroll-root">
  <div className="toolbar">This row sticks once it reaches the top</div>
</CfAffix>
</div>

API

Prop	Type	Default	Description
`offsetTop`	`number`	`—`	Pixel offset from the container top when pinned
`offsetBottom`	`number`	`—`	Pixel offset from the container bottom when pinned; mutually exclusive with `offsetTop`
`target`	`string`	`—`	Scroll container selector; omit to listen on `window`
`zIndex`	`number`	`100`	Stacking level once pinned