盒子内的元素不随着滚动轴滚动--ant design
成员 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | ||
offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | ||
target | 设置 Affix 需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数 |
() => HTMLElement | () => window | |
onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |
Affix的target属性: 作为Affix 监听其滚动事件的元素,此元素有固定宽高和溢出使用滚动轴,不一定是Affix的父代元素
Affix 内部只能有一个子代子元素,但可以有多个后代元素
Affix 可以是容器的【子代元素 | 后代元素】
注意:Affix
内的元素不要使用绝对定位,如需要绝对定位的效果,可以直接设置 Affix
为绝对定位:
let container = null <div ref={(node)=>container=node}> .... <Affix target={() => container} style={{ position: 'absolute', top: y, left: x }}>...</Affix> .... </div>
或者
当Affix距离顶部距离>260,其他==true, 意味着Affix距离顶部距离>=260
onChange={(affix) => {
console.log('affix', affix)// false
}}
let container = null <div ref={(node)=>container=node}> .... <Affix target={() => container} offsetTop={260} onChange={(affix)=>{console.log('affix', affix)}}>...</Affix> .... </div>
或者
let container = null <div ref={(node)=>container=node}> .... <Affix target={() => container} offsetBottom={260}>...</Affix> .... </div>