🐛 [BUG]layout-side 布局左侧头像拉出的菜单浮动异常

[lgcgo]

🐛 bug 描述

当右侧内容超过浏览器显示高度，点击头像拉出了的菜单，并没有相对头像位置固定

📷 复现步骤 | Recurrence steps

layout:side

🏞 期望结果 | Expected results

拉出的菜单相对头像位置固定，即使右侧内容在滚动

💻 复现代码 | Recurrence code

无

© 版本信息

• Ant Design Pro 版本: version 6.0.0
• umi 版本 4.0
• 浏览器环境 Google Chrome
• 开发环境 Window11 nodejs 18.14

🚑 其他信息

[chenshuai2144]

值得注意是的百分之二十的问题都可以用重装依赖来解决，所以你可以尝试一下：
删除 'node_modules' 文件夹 -> 删除 'package-lock.json'或 'pnpm-lock.yaml' 文件 -> 运行 'pnpm install' 或 'npm install' 命令

这个问题的解决方案是在layout-side组件中设置菜单栏的定位方式为"fixed"，这样菜单栏会相对于头像位置固定，即使右侧内容滚动也不会改变菜单栏的位置。具体操作如下：

1. 打开layout-side的代码文件，找到菜单组件所在的位置。
2. 在菜单组件的样式中添加以下属性：

position: fixed;

3. 保存文件并重新编译运行项目，查看效果。

这样，当点击头像拉出菜单时，菜单栏会相对于头像位置固定，并且不会随着右侧内容的滚动而改变位置。

[chenshuai2144]

你的滚动条是不是不在body，如果不在body要自己处理一下滚动条了，要是懒得解决可以试试

const HeaderDropdown: React.FC<HeaderDropdownProps> = ({ overlayClassName: cls, ...restProps }) => {
  const { styles } = useStyles();
  return (
    <Dropdown
      getPopupContainer={(e) => {
        return (e.parentNode as HTMLElement) || document.body;
      }}
      overlayClassName={classNames(styles.dropdown, cls)}
      {...restProps}
    />
  );
};