Affix 固钉

Guide

何时使用

当用户需要将某个组件固定在页面的某个位置时,可以使用 Affix 组件进行固定。

基本

默认情况下,Affix 的默认目标容器元素是整个 window,并且 offsetTop = 0, 也就意味着当页面往下滚动时,当 Affix 元素接触到浏览器边框时,此时会将 Affix 钉住。

自定义偏移量

可以通过 offsetTopoffsetBottom 自定义偏移量。

自定义目标容器

可以通过 container 属性设置 Affix 组件需要监听其滚动事件的元素,该属性接收一个函数作为参数,默认为 () => window

启用绝对布局

可以通过 container 属性设置 Affix 组件需要监听其滚动事件的元素,该属性接收一个函数作为参数,默认为 () => window; 设置 useAbsolute 为 true,通过 absolute 布局实现组件固定。

onAffix

可以通过传入 onAffix 的事件回调函数来监听元素是否发生了固钉状态。该函数会在状态变化时返回固钉状态。

API

Affix

参数说明类型默认值
container设置 Affix 需要监听滚动事件的容器元素

签名:
Function() => ReactElement
返回值:
{ReactElement} 目标容器元素的实例
Function() => window
offsetTop距离窗口顶部达到指定偏移量后触发Number-
offsetBottom距离窗口底部达到制定偏移量后触发Number-
onAffix当元素的样式发生固钉样式变化时触发的回调函数

签名:
Function(元素是否被固钉: Boolean) => void
参数:
元素是否被固钉: {Boolean} null
Functionfunc.noop
useAbsolute是否启用绝对布局实现 affixBoolean-