在React中创建2个互不重叠的导航栏（navbar）是否可行？

问题原因 #

MUI 内置的 AppBar 组件默认启用 position: fixed 定位，该定位规则会让元素脱离正常文档流，不占据页面高度，因此即便放在纵向排列的Grid子容器中，两个AppBar也会重叠在视口顶部。

修复方案 #

场景1：两个导航栏都固定在页面顶部，滚动时不跟随内容移动 #

<>
  <Grid direction='column'>
    <Grid>
      <Box>
        {/* 第一个AppBar，默认固定在视口顶部 */}
        <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
          <Toolbar>
            {/* 第一个导航栏自定义内容 */}
          </Toolbar>
        </AppBar>
      </Box>
    </Grid>

    <Grid>
      <Box>
        {/* 第二个AppBar，top值设置为第一个导航栏的高度，MUI默认Toolbar高度为64px */}
        <AppBar position="fixed" sx={{ top: '64px', zIndex: (theme) => theme.zIndex.drawer }}>
          <Toolbar>
            {/* 第二个导航栏自定义内容 */}
          </Toolbar>
        </AppBar>
      </Box>
    </Grid>

    {/* 页面主体内容，设置paddingTop避开两个导航栏总高度，避免内容被遮挡 */}
    <Grid sx={{ paddingTop: '128px' }}>
      {/* 页面主体内容 */}
    </Grid>
  </Grid>
</>

场景2：导航栏仅放在页面顶部，跟随页面内容滚动 #

直接修改两个AppBar的定位属性即可，无需额外设置偏移值：

<>
<Grid direction='column'>
<Grid>
<Box>
<AppBar position="static">
<Toolbar>
{/* 第一个导航栏自定义内容 */}
</Toolbar>
</AppBar>
</Box>
</Grid>

<Grid>
<Box>
<AppBar position="static">
<Toolbar>
{/* 第二个导航栏自定义内容 */}
</Toolbar>
</AppBar>
</Box>
</Grid>

<Grid>
{/* 页面主体内容 */}
</Grid>
</>

补充说明 #

• 两个AppBar可以通过各自的sx、color等属性单独配置样式、功能，完全支持独立个性化设置
• 如果你自定义了Toolbar的高度，将第二个AppBar的top值和内容的paddingTop替换为实际设置的高度即可

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