Affix固钉组件在滚动时定位失效，如何解决？

这个问题很典型，我也遇到过好几次。Affix固钉失效大部分情况下不是组件本身的bug，而是和父容器的CSS属性或者滚动上下文有关。你提到的transform确实是个关键点，我来一步步帮你排查和解决。

首先说结论：当父元素设置了transform、will-change、filter等属性时，会创建新的层叠上下文（stacking context），导致fixed定位失效或行为异常。因为position: fixed是相对于视口定位的，但一旦父级有transform，fixed就会变成“看起来像fixed但实际上受transform影响”的奇怪状态。

第一步，检查你的外层容器有没有transform这类属性
比如页面布局用了transform做动画，或者用了某些轮子自带的过渡效果。你可以临时加个调试样式：

/* 临时加上这行看看是不是transform的问题 */

* {

  transform: none !important;

}

如果加上这个之后Affix恢复正常，那基本可以确定是transform在作祟。

第二步，解决方案有两个方向

方案一：避免在Affix祖先元素上使用transform
如果你能改布局，尽量把需要transform的元素和Affix分开层级。比如原来可能是：



改成把Affix提升到外层，脱离那个transform的影响范围：

侧边栏

这样Affix直接挂在body下，不受内部transform干扰。

方案二：使用getTarget属性指定监听容器
这是Ant Design Affix提供的一个很实用的API。默认情况下它监听window滚动，但你可以指定某个父容器作为滚动容器，这样即使有transform也能正确计算位置。

function MyComponent() {

  // 指定监听某个容器而不是window

  const getContainer = () => document.getElementById('scroll-container');



  return (

    


      

        
侧边导航


      

    


  );

}

这里需要注意的是，target返回的必须是一个DOM节点，而且这个节点要有滚动条（overflow: auto/scroll）。这样Affix就会监听这个节点的滚动事件，而不是window。

第三步，关于你写的CSS问题
你手动加了position: fixed和top，其实没必要。Ant Design的Affix在激活时会自动加上这些样式，你强行覆盖反而可能破坏它的状态切换逻辑。

正确的做法是通过offsetTop控制距离顶部多高开始固定，用className控制样式：

/* 只保留你需要的样式，不要动定位相关属性 */

.affix-container {

  width: 240px;

  margin-top: 20px;

}



/* 固定后的样式微调 */

.custom-affix-style {

  background: #fff;

  box-shadow: 0 2px 8px rgba(0,0,0,.1);

  transition: all .3s;

}

然后JSX里这么写：

<Affix offsetTop={80} target={getContainer}>

  <div className="affix-container custom-affix-style">

    侧边栏内容

  </div>

</Affix>

最后补充一个容易忽略的点：页面底部留白不够也会让Affix提前解除固定状态。因为Affix要确保自己不会跑到可视区域外去。所以你要检查页面最后的内容后面有没有足够空白，或者设置offsetBottom来控制底部锚点。

总结一下排查顺序：
先看有没有transform类属性影响fixed定位
再检查Affix是否被正确挂载在合适的滚动上下文中
用target指定容器比依赖window更稳定
不要手动干预ant-affix的定位样式
保证页面有足够的滚动空间

你现在可以先打开浏览器开发者工具，逐层往上查父元素的computed styles，看看有没有transform: translateZ之类的。大概率是这个原因。

你这个问题是典型的Affix组件和父级容器样式冲突。直接去掉top: 10%，改成具体像素值试试，比如top: 20px。外层如果有transform确实会影响，建议检查下父级是否用了translate之类的属性。如果还是不行，用这个：

import { Affix } from 'antd';



const SideNav = () => (

  

    


      {/* 你的内容 */}

    


  

);



export default SideNav;

CSS部分这样写就稳了：

.affix-content {

  width: 240px;

  background: #fff;

  box-shadow: 0 2px 8px rgba(0,0,0,.1);

}