Affix

将页面元素钉在可视范围。

何时使用 #

  • 当内容区域比较长,需要滚动页面时,这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
  • 页面可视范围过小时,慎用此功能以免遮挡页面内容。

代码演示 #

基本 #

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

固钉事件 #

onAffix 该函数会在状态变化时返回固钉状态。向下滚动查看效果

自定义偏移量 #

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

自定义目标容器 #

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

启用绝对布局 #

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

API #

Affix #

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

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

签名:
参数:
affixed: 是否固定
(affixed: boolean) => void -
useAbsolute 是否启用绝对布局实现 affix boolean -
className 包裹 children 容器的类名 string -
style 最外层容器的 style 样式 React.CSSProperties -