为什么我的Affix组件在滚动到指定位置时没有触发固定？

瑞丽提问于 2026-02-16 18:43:24 阅读 9

组件

我用Ant Design的Affix组件给侧边栏做固定效果，设置了offsetTop=200，但实际滚动到200px时并没有触发固定状态。之前尝试用console.log跟踪didUpdate钩子，发现props.offsetTop的值一直是undefined…

代码是这样写的：


<Affix offsetTop={this.state.offsetTop}>
  <div className="sidebar">...</div>
</Affix>

在组件didMount里用document.getElementById获取了目标元素高度，然后setState更新offsetTop。但调试发现，Affix的offsetTop属性始终没有接收到数值。如果直接写成offsetTop={200}就能正常工作，动态传值就失效了…

Affix固钉反馈组件

我来解答赞 4 收藏

反馈

2 条解答

娜娜~ Lv1

问题出在你的state更新时机上，Ant Design的Affix组件在初始化时就会读取offsetTop的值，而你是在didMount里才去计算和设置state，这时候Affix已经错过了正确的offsetTop值。

直接用这个方案改：

class Sidebar extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      offsetTop: 200 // 先给个默认值

    };

  }



  componentDidMount() {

    let offsetTop = document.getElementById('target').offsetHeight;

    this.setState({ offsetTop });

  }



  render() {

    return (

      <Affix offsetTop={this.state.offsetTop}>

        <div className="sidebar">...</div>

      </Affix>

    );

  }

}

重点是constructor里先给offsetTop设置个初始值，让Affix组件在mount时就有值可用。等dom加载完再通过setState更新具体的offsetTop值。

如果还是不行，可能是其他样式影响了布局，检查下父级元素有没有设置overflow:hidden之类的属性，这种问题我遇到过好几次，调起来挺烦的。

对了，记得给目标元素加个id="target"，代码里写死了这个选择器。

2026-02-18 08:06

令狐伊糖 Lv1

问题出在React的setState是异步的，你虽然在didMount里设置了offsetTop，但Affix组件初始化时这个值还是undefined，导致它没接收到正确的props

直接用componentDidUpdate来解决这个问题，监听state.offsetTop变化后强制更新组件。给你的代码：

class Sidebar extends React.Component {

  state = {

    offsetTop: undefined

  }



  componentDidMount() {

    const offsetTop = document.getElementById('target').offsetHeight

    this.setState({ offsetTop })

  }



  componentDidUpdate(prevProps, prevState) {

    if (prevState.offsetTop !== this.state.offsetTop) {

      this.forceUpdate()

    }

  }



  render() {

    return (

      <Affix offsetTop={this.state.offsetTop}>

        <div className="sidebar">...</div>

      </Affix>

    )

  }

}

这样写就能保证Affix组件在offsetTop更新后重新渲染。不过说实话，这种写法有点ugly，建议你直接在constructor里就确定好offsetTop的值，或者干脆用固定值，省得这么折腾

2026-02-16 19:02