在用户界面设计中，滚动文本对话框是常见元素——从长文档阅读、聊天记录浏览到设置页面，用户经常需要在一个固定容器内上下滑动内容。然而，当对话框顶部需要放置一个固定不动的菜单栏（如操作按钮、标签切换或搜索框）时，一个棘手的问题便出现了：文字内容在滚动时容易与菜单栏重叠，或被菜单栏遮挡，严重影响可读性和用户体验。
近日，前端开发社区围绕“在滚动文本对话框中添加粘性菜单栏，且文字始终显示在栏上方”这一技术点展开讨论。该方案通过巧妙运用CSS position属性与JavaScript动态计算，实现了菜单栏“粘”在对话框顶部、文字在滚动时从菜单栏下方穿过并保持完整可见的效果。这项优化不仅提升了界面的美观度，更解决了长期以来滚动内容与固定控件共存的痛点。
场景重现：固定的菜单栏与滚动的文字
假设我们有一个阅读类App的对话框：顶部是“收藏”“分享”“字体调整”三个按钮组成的操作栏，下方是大段小说文本。传统做法有两种：一是将操作栏置于对话框之外，占用额外屏幕空间；二是将操作栏固定在对话框内部顶部，但文字滚动时，被操作栏遮挡的部分无法显示，用户不得不频繁回滚。
“粘性菜单栏”方案的核心在于：菜单栏在对话框内保持固定位置（不随滚动移动），但文字内容在垂直方向上的布局要确保其起始点位于菜单栏下方，且滚动时文字始终从菜单栏下方“露出”，不会出现遮盖。换言之，文字出现在栏上方（即菜单栏覆盖在文字顶部，但文字通过padding或margin避开菜单栏高度），滚动时文字内容整体上移，但菜单栏始终“粘”在顶部。
实现原理：CSS粘性与偏移量控制
实现这一效果主要依赖两个技术点：
-
position: sticky 与 overflow 的结合
将菜单栏设为position: sticky; top: 0;，并让包含文字内容的父容器设置overflow: auto。这样菜单栏在滚动时会被“粘”在容器顶部，不随文字滚动。但默认情况下，sticky元素会覆盖下方滚动内容。为了避免遮挡，需要为文字区域添加与菜单栏高度相等的padding-top，使文字从菜单栏下方开始显示。 -
动态高度计算
如果菜单栏高度固定（如50px），直接设置padding-top: 50px即可。但现代UI中菜单栏可能因按钮数量、响应式布局而变化。此时需使用JavaScript在页面加载或窗口大小变化时获取菜单栏的实际高度，并动态更新文字区域的padding-top值。同时，还要确保滚动条不因padding而出现异常，通常需要将滚动容器的高度设置为calc(100% - 菜单栏高度)。
部分开发者还采用了“两层容器”策略：外层容器负责滚动，内层容器包含菜单栏（sticky）和文字块（用margin-top避开），使逻辑更清晰。
效果实测：流畅体验与潜在陷阱
实际测试中，该方案在桌面端和移动端均表现稳定。以一篇2000字的文章为例，菜单栏始终吸附于对话框顶部，文字从栏下方开始显示，向下滚动时，已读文字平滑消失于菜单栏下方，新文字从栏下浮现——类似“视口滚动 + 固定覆盖层”的体验，但文字永远不会被栏切开或遮挡。
需注意的是，若文字区域本身已有padding，需要将这两个值叠加。另外，当菜单栏包含可操作交互（如下拉菜单）时，应确保菜单面板的z-index高于文字区域，避免被滚动内容覆盖。此外，部分老旧浏览器对position: sticky的支持有限，需提供回退方案（如使用fixed+JS计算）。
应用前景：不止于对话框
这一设计模式正在超越对话框，被应用于侧边栏、底部导航栏、卡片内部分类标签等场景。例如，在电商App的商品详情页中，固定顶部“加入购物车”栏同时滚动图文介绍；在表单页面中，固定“提交/重置”按钮而不遮挡输入框。随着用户对界面流畅度要求提升，“粘性菜单栏+滚动内容”的组合已成为高性能UI的标配。
对于开发者而言，掌握这一技巧不仅解决了具体问题，更体现了“为内容让路”的设计思维——固定控件不应成为阅读障碍，而应成为辅助工具。未来，随着CSS overlay和滚动驱动动画的普及，类似的交互将更加强大和简洁。
目前，GitHub上已有多个开源库提供该功能的现成组件（如react-sticky、vue-sticky-directive），新手可直接引用。而对于追求极致性能的团队，原生实现往往更具可控性。无论如何，让文字始终“出现在栏上方”——这句看似矛盾的表述，如今已有了优雅的答案。