盒子内的元素不随着滚动轴滚动--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>

  

原文地址:https://www.cnblogs.com/baixinL/p/14918657.html