Material UI：如何实现顶部AppBar下方的粘性AppBar？

嘿，这个问题我太熟了！当你给下方的AppBar设置position="sticky"时，默认的top: 0会让它直接粘在视口最顶部，自然就把上方的固定AppBar给盖住了。解决这个问题的关键很简单——给粘性AppBar设置等于顶部AppBar高度的top样式值，这样它只会在滚动到顶部AppBar的下方位置时才会固定住，完美避免覆盖。

React + Material UI 示例 #

如果你用的是Material UI，这里有一个完整的可运行示例，还兼顾了移动端适配：

import React from 'react';
import { useTheme } from '@mui/material/styles';
import { AppBar, Toolbar, Typography, Box, Container } from '@mui/material';

export default function StickyAppBarBelowTop() {
  // 从主题中获取顶部AppBar的默认高度，适配移动端和桌面端
  const theme = useTheme();
  const topAppBarHeight = theme.mixins.toolbar.minHeight;

  return (
    <Box sx={{ minHeight: '200vh' }}> {/* 让页面足够长以测试滚动 */}
      {/* 顶部固定的AppBar */}
      <AppBar 
        position="fixed" 
        sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }} // 确保它在最上层
      >
        <Toolbar>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            顶部固定AppBar
          </Typography>
        </Toolbar>
      </AppBar>

      {/* 内容容器，设置paddingTop避免被顶部AppBar遮挡 */}
      <Box sx={{ paddingTop: `${topAppBarHeight + 20}px` }}>
        <Container maxWidth="lg">
          <Typography variant="h4" gutterBottom>
            页面内容开头
          </Typography>
          <Typography paragraph>
            滚动页面看看下方的粘性AppBar效果...
          </Typography>
          <Typography paragraph>
            继续滚动，粘性AppBar会在到达顶部AppBar下方时固定住。
          </Typography>
        </Container>

        {/* 粘性AppBar，核心是设置top等于顶部AppBar的高度 */}
        <AppBar
          position="sticky"
          sx={{
            top: `${topAppBarHeight}px`,
            backgroundColor: 'secondary.main', // 换个颜色区分两个AppBar
            zIndex: (theme) => theme.zIndex.drawer // 确保它在内容上方，但低于顶部AppBar
          }}
        >
          <Toolbar>
            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
              下方粘性AppBar
            </Typography>
          </Toolbar>
        </AppBar>

        {/* 长内容用来测试滚动 */}
        <Container maxWidth="lg" sx={{ marginTop: 2 }}>
          {[...Array(20)].map((_, index) => (
            <Typography key={index} paragraph>
              这是第{index + 1}段测试内容，滚动看看粘性AppBar的表现。
            </Typography>
          ))}
        </Container>
      </Box>
    </Box>
  );
}

原生HTML/CSS 示例 #

如果不用框架，原生CSS的思路完全一致：

<!DOCTYPE html>
<html>
<head>
  <style>
    .top-appbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 64px;
      background: #1976d2;
      color: white;
      display: flex;
      align-items: center;
      padding: 0 20px;
      z-index: 100; /* 确保顶部AppBar在最上层 */
    }

    .sticky-appbar {
      position: sticky;
      top: 64px; /* 等于顶部AppBar的高度，关键设置 */
      background: #dc004e;
      color: white;
      padding: 16px 20px;
      z-index: 90; /* 低于顶部AppBar的z-index */
    }

    .content {
      padding-top: 84px; /* 顶部AppBar高度 + 20px间距，避免内容被遮挡 */
      max-width: 1200px;
      margin: 0 auto;
    }

    .long-content {
      height: 200vh; /* 让内容足够长以测试滚动 */
    }
  </style>
</head>
<body>
  <div class="top-appbar">顶部固定AppBar</div>
  
  <div class="content">
    <h2>页面内容开头</h2>
    <p>滚动页面看看下方的粘性AppBar效果...</p>
    
    <div class="sticky-appbar">下方粘性AppBar</div>
    
    <div class="long-content">
      <p>这是很长的测试内容，用来观察滚动行为...</p>
      <p>更多测试内容...</p>
      <p>更多测试内容...</p>
      <p>更多测试内容...</p>
      <p>更多测试内容...</p>
      <p>更多测试内容...</p>
      <p>更多测试内容...</p>
      <p>更多测试内容...</p>
    </div>
  </div>
</body>
</html>

关键要点总结 #

• 核心设置：给粘性AppBar设置top: [顶部AppBar高度]px，这是避免覆盖的关键。
• z-index管理：确保顶部AppBar的z-index高于粘性AppBar，避免滚动时层级错乱。
• 内容偏移：给页面内容设置paddingTop，避免顶部内容被固定的AppBar遮挡。
• 适配优化：如果用组件库，尽量使用主题提供的高度变量（比如Material UI的theme.mixins.toolbar.minHeight），避免硬编码高度，适配不同设备尺寸。

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