使用CSS的position: sticky与Flexbox结合可实现吸顶效果，元素在滚动到顶部时固定，直至父容器移出视口。1. sticky是relative与fixed的结合，需设置top等值生效，不脱离文档流；2. Flexbox构建布局，侧边栏与主内容区分离，主内容区设置overflow-y: auto使其独立滚动；3. 给目标元素设position: sticky和top: 0，配合z-index确保层级；4. 注意父容器避免overflow: hidden，iOS中可加-webkit-overflow-scrolling: touch优化。该方法无需JavaScript，兼容性好，适用于导航栏、标签页等场景。
使用 CSS 的 position: sticky 与 Flexbox 结合，可以轻松实现“吸顶”效果，也就是当页面滚动时，某个元素（如导航栏、标签页）滚动到顶部后固定在视口顶部，直到其父容器离开视口为止。这种方法无需 JavaScript，兼容性好，语义清晰。
1. 基本原理：sticky 定位
position: sticky 是相对定位和固定定位的结合体。元素在正常文档流中表现为 relative，但当滚动到特定阈值（如 top: 0）时，就“粘”在视口的某个位置，表现得像 fixed。
关键点：
- 必须设置 top、bottom、left 或 right 才能生效
- 它的包含块（父元素）必须有足够的滚动高度才能体现“吸”的过程
- 不会脱离文档流，不影响其他元素布局
2. Flexbox 布局结构
使用 Flexbox 可以方便地构建页面整体结构，将需要吸顶的元素放在 flex 容器中的合适位置。常见场景是侧边栏 + 主内容区，主内容区中某部分需要吸顶。
立即学习“前端免费学习笔记（深入）”；
示例结构：
.container {
display: flex;
}
<p>.sidebar {
width: 200px;
}</p><p>.main {
flex: 1;
overflow-y: auto; /<em> 让主内容可滚动 </em>/
}</p><p>.sticky-header {
position: sticky;
top: 0;
background: #fff;
z-index: 10;
padding: 10px;
border-bottom: 1px solid #ddd;
}
3. 实际代码示例
下面是一个完整的例子，展示如何结合两者实现吸顶标题：
<div class="layout">
<aside class="sidebar">
<h3>侧边栏</h3>
</aside>
<main class="content">
<header class="sticky-header">我吸顶了！</header>
<div class="page-content">
<p>滚动试试看...</p>
<p>段落内容...</p>
<!-- 多些内容触发滚动 -->
</div>
</main>
</div>
CSS 样式：
.layout {
display: flex;
min-height: 100vh;
}
<p>.sidebar {
width: 200px;
background: #f0f0f0;
padding: 20px;
}</p><p>.content {
flex: 1;
padding: 20px;
overflow-y: auto; /<em> 关键：让 main 自己滚动 </em>/
}</p><p>.sticky-header {
position: sticky;
top: 0;
background: white;
padding: 15px 0;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 10;
}
4. 注意事项与技巧
要确保 sticky 正常工作，需注意以下几点：
- 父容器不能有 overflow: hidden/scroll，否则可能限制 sticky 行为（除非你希望它在局部容器内吸顶）
- 让内容区域自己滚动（比如 main 设置 overflow-y: auto），而不是整个 body 滚动，这样 sticky 才能在该区域内生效
- 多个 sticky 元素可以叠加，z-index 控制层级
- 在 iOS Safari 中，sticky 支持较好，但有时需要添加 -webkit-overflow-scrolling: touch 来优化滚动体验
基本上就这些。用 position: sticky 配合 Flexbox 实现吸顶，简洁高效，适合大多数现代布局场景。
