Affix 固钉

Affix 固钉

将页面元素固定在特定可视区域。

基础用法

固钉默认固定在页面顶部。

通过设置 offset 属性来改变吸顶距离，默认值为 0。

<template>
  <el-affix :offset="120">
    <el-button type="primary">Offset top 120px</el-button>
  </el-affix>
</template>

指定容器

通过设置 target 属性，让固钉始终保持在容器内，超过范围则隐藏。

请注意容器避免出现滚动条。

<template>
  <div class="affix-container">
    <el-affix target=".affix-container" :offset="80">
      <el-button type="primary">Target container</el-button>
    </el-affix>
  </div>
</template>
<style scoped>
.affix-container {
  text-align: center;
  height: 400px;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
}
</style>

固定位置

Affix 组件提供 2 个固定的位置参数 top 和 bottom。

通过设置 position 属性来改变固定位置，默认值为 top 。

<template>
  <el-affix position="bottom" :offset="20">
    <el-button type="primary">Offset bottom 20px</el-button>
  </el-affix>
</template>

Affix API

Affix 属性

名称	说明	类型	默认值	必填
`offset`	偏移距离	`number`	`0`	否
`position`	位置	`‘top’ \| ‘bottom’`	`‘top’`	否
`target`	指定容器 (CSS 选择器)	`string`	—	否
`z-index`	`z-index`	`number`	`100`	否

Affix 事件

名称	说明	类型
`change`	fixed 状态改变时触发的事件	`(fixed: boolean) => void`
`scroll`	滚动时触发的事件	`(value: { scrollTop: number, fixed: boolean }) => void`