答案：使用CSS的position: sticky可轻松实现吸顶效果。设置top值后，元素滚动到视口指定位置时会固定显示，超出父容器则恢复文档流，无需JavaScript，但需避免父级设置overflow:hidden，确保兼容性和层级顺序。
吸顶效果在网页中很常见，比如导航栏滚动到顶部时固定住，继续浏览页面内容时它始终可见。HTML5 结合 CSS 的 粘性定位（position: sticky） 能轻松实现这一功能，无需复杂 JavaScript。
什么是粘性定位（sticky）
粘性定位是 CSS 中的一种定位方式，元素在正常文档流中，直到滚动到某个设定的阈值（如距顶部 0px），就“粘”在可视区域内，表现得像 fixed 定位，但脱离文档流后又恢复为相对定位。
关键点：
用 position: sticky 实现吸顶导航
下面是一个简单的 HTML + CSS 示例，展示如何让导航栏滚动到顶部时吸顶：
立即学习“前端免费学习笔记（深入）”；
我的网站导航
这里是一些内容，用于触发滚动。
说明：
- position: sticky 启用粘性定位
- top: 0 表示距离视口顶部 0px 时开始“吸附”
- z-index: 100 确保导航栏在其他内容之上
实际应用中的注意事项
虽然 sticky 很方便，但在使用中要注意以下几点：
- 确保父元素没有设置 overflow: hidden，否则 sticky 可能不生效
- 多个 sticky 元素叠加时，按 DOM 顺序层级自动调整
- 在表格中可用于固定表头，只需给 th 设置
position: sticky; top: 0 - 移动端同样适用，但建议测试 iOS Safari 的兼容性
基本上就这些。用 position: sticky 实现吸顶效果简单高效，不需要监听 scroll 事件或写一堆 JS，推荐优先使用。不复杂但容易忽略细节，比如 top 值和父容器限制。掌握这一点，日常开发中吸顶功能就能快速搞定。
