将页面元素钉在可视范围。
默认情况下,Affix 的默认目标容器元素是整个 window
,并且 offsetTop = 0
,
也就意味着当页面往下滚动时,当 Affix 元素接触到浏览器边框时,此时会将 Affix 钉住。
可以通过 container
属性设置 Affix 组件需要监听其滚动事件的元素,该属性接收一个函数作为参数,默认为 () => window
;
设置 useAbsolute 为 true,通过 absolute 布局实现组件固定。
参数 | 说明 | 类型 | 默认值 | 是否必填 |
---|---|---|---|---|
container | 设置 Affix 需要监听滚动事件的容器元素 签名: 返回值: 目标容器元素 |
() => Element | Window | () => window | |
offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | - | |
offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | - | |
onAffix | 当元素的样式发生固钉样式变化时触发的回调函数 签名: 参数: affixed: 是否固定 |
(affixed: boolean) => void | - | |
useAbsolute | 是否启用绝对布局实现 affix | boolean | - | |
className | 包裹 children 容器的类名 | string | - | |
style | 最外层容器的 style 样式 | React.CSSProperties | - |