如何让MudBlazor对话框的TitleContent固定/粘性定位

这个需求完全可以实现，核心是调整MudDialog的滚动容器范围，把标题区域单独固定，只让内容区域滚动。以下是具体实现方案：

步骤1：调整对话框结构 #

修改你的MudDialog代码，给标题添加自定义类，同时把DialogContent包裹在带滚动的容器内：

<MudDialog Class="sticky-header-dialog">
    <TitleContent Class="dialog-title">
        <MudText Style="float:left"><b>左侧标题</b></MudText>
        <MudText Style="float:right"><b>右侧操作</b></MudText>
        <div style="clear:both"></div> <!-- 清除浮动，避免标题布局错乱 -->
    </TitleContent>
    <DialogContent>
        <div class="dialog-content-scroll">
            <!-- 这里放入你的长内容 -->
            @for (int i = 0; i < 50; i++)
            {
                <MudText>第@(i+1)行测试内容</MudText>
            }
        </div>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">取消</MudButton>
        <MudButton OnClick="Submit" Color="Color.Primary">确认</MudButton>
    </DialogActions>
</MudDialog>

步骤2：添加自定义CSS样式 #

在组件的<style>标签或全局样式文件中添加以下样式：

.sticky-header-dialog .mud-dialog {
    display: flex;
    flex-direction: column;
    max-height: 80vh; /* 替换为你需要的最大高度值 */
}

.sticky-header-dialog .dialog-title {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: white; /* 与对话框背景色保持一致，避免滚动透显 */
    padding: 16px 24px; /* 对齐MudDialog默认标题的内边距 */
    border-bottom: 1px solid rgba(0,0,0,0.12); /* 可选：添加分隔线增强视觉区分 */
}

.sticky-header-dialog .mud-dialog-content {
    flex: 1;
    padding: 0; /* 取消默认内容内边距，由内部滚动容器控制 */
    overflow: visible; /* 关闭默认内容区域的滚动 */
}

.dialog-content-scroll {
    padding: 16px 24px; /* 还原内容的内边距 */
    max-height: calc(100% - 0px); /* 根据标题高度调整数值，避免内容被遮挡 */
    overflow-y: auto;
}

原理说明 #

默认MudDialog的滚动是作用在整个.mud-dialog-content容器上，标题不在该滚动范围内，因此直接给标题加position:sticky无效。我们通过以下调整实现粘性标题：

1. 将对话框改为Flex垂直布局，让标题、内容、操作栏按顺序排列
2. 把滚动限制在内容内部的.dialog-content-scroll容器中
3. 给标题设置sticky属性，使其固定在对话框顶部

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