MUI固定定位Drawer遮挡顶部导航栏的解决办法咨询

核心思路 #

MUI的permanent类型Drawer默认是固定定位（position: fixed）且top: 0，会覆盖在顶部AppBar之上。无需修改Drawer的定位类型，只需调整它的垂直起始位置，让其从AppBar下方开始显示，同时确保AppBar固定在顶部不被遮挡。

具体实现步骤 #

• 固定AppBar在顶部：将AppBar的position设为fixed，确保它始终处于页面最上层。
• 调整Drawer的垂直范围：设置Drawer的top值等于AppBar的高度，让Drawer从AppBar下方开始渲染，同时限制Drawer高度为视口高度减去AppBar高度，保留原生滚动效果。
• 避开AppBar的内容区域：给页面主内容添加marginTop，避免内容被固定的AppBar遮挡。

修改后的代码示例 #

import { AppBar, Box, Drawer, Toolbar, useTheme, useMediaQuery } from "@mui/material";

export default function App() {
  const theme = useTheme();
  // 适配不同屏幕下的Toolbar高度（移动端默认56px，桌面端64px）
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  const appBarHeight = isMobile ? 56 : 64;

  return (
    <Box sx={{ marginTop: appBarHeight }}>
      {/* 固定在顶部的导航栏 */}
      <AppBar position="fixed">
        <Toolbar>
          Tab1
          Tab 2
        </Toolbar>
      </AppBar>

      {/* 调整位置的永久筛选面板 */}
      <Drawer
        anchor="left"
        variant="permanent"
        open
        disablePortal
        sx={{
          top: appBarHeight,
          height: `calc(100vh - ${appBarHeight}px)`,
          // 确保Drawer内部可滚动
          "& .MuiDrawer-paper": {
            top: appBarHeight,
            height: `calc(100vh - ${appBarHeight}px)`,
            overflowY: "auto",
          },
        }}
      >
        <p>Filter 1</p>
        <p>Filter 2</p>
        <p>Filter 1</p>
        <p>Filter 2</p>
        <p>Filter 1</p>
        <p>Filter 2</p>
        <p>Filter 1</p>
        <p>Filter 2</p>
        <p>Filter 1</p>
        <p>Filter 2</p>
        <p>Filter 1</p>
        <p>Filter 2</p>
        <p>Filter 1</p>
        <p>Filter 2</p>
        <p>Filter 1</p>
        <p>Filter 2</p>
        <p>Filter 1</p>
        <p>Filter 2</p>
      </Drawer>

      {/* 右侧内容展示区域 */}
      <Box sx={{ marginLeft: 24, padding: 2 }}>
        {/* 这里放置你的卡片内容 */}
        <p>右侧卡片内容区域</p>
      </Box>
    </Box>
  );
}

关键细节说明 #

• 移动端适配：通过useMediaQuery结合MUI主题断点，自动切换AppBar高度，保证在手机端也能正常显示。
• 滚动效果保留：通过设置Drawer内部容器的height和overflowY: auto，确保筛选面板内容过多时可正常滚动，不会破坏原有交互。
• 层级关系：固定定位的AppBar会自然覆盖在Drawer的顶部区域，无需额外调整z-index即可避免遮挡。

内容的提问来源于stack exchange，提问作者Ashim upadhaya