position: sticky 在 grid 容器中失效是因为其依赖滚动祖先，而未截断的 grid 不产生独立滚动上下文；正确做法是用 为每组侧边栏与内容创建独立滚动上下文，使 sticky 仅作用于本节。
纯 CSS 实现不了“跟随滚动”的侧边栏——position: sticky 只能吸附在视口或滚动祖先顶部/底部，不能动态追踪内容区块的滚动位置；所谓“跟随”，本质是“按行吸附 + 按需释放”，必须靠结构隔离来模拟。
为什么 position: sticky 单独用在 Grid 容器里会失效
当所有 .sidebar 和 .content 都直接放在同一个 display: grid 容器中，且该容器本身不产生滚动截断（比如没设 height 或 overflow），浏览器会把整个 Grid 视为一个统一的粘性作用域。结果就是多个 sticky 元素同时吸到视口顶部，互相重叠，根本分不清谁该跟谁。
-
sticky不看内容高度，只看最近的“滚动祖先”——如果 Grid 容器不滚动，它就退化成相对定位 - 给 Grid 容器加
overflow-y: auto？不行，会截断侧边栏或触发双滚动条 - 给
.sidebar加position: sticky同时又让它在 Grid 列轨道里？定位冲突，行为不可控
正确做法：用 <section></section> 切割粘性作用域
每个侧边栏必须和它对应的内容组成一个独立的滚动上下文，这样 sticky 才能只对本节生效。这不是 hack，是 sticky 的设计前提。
- 每组“侧边栏 + 内容”包在单独的
<section class="row"></section>里，不要全塞进一个 Grid 容器 -
.row设display: grid; grid-template-columns: 240px 1fr;，不设height或overflow -
.sidebar加position: sticky; top: 0;，.content不加任何定位或 overflow - 确保
.row高度由内容自然撑开——sticky只在本.row进入视口且未完全滚出时生效
Grid 容器里强行做“跟随”？别碰这三件事
有人试图在单个 Grid 中用 grid-row: 1 / -1 + sticky 让侧边栏跨多行吸附，结果要么不动、要么错位、要么卡死。原因很实在：
-
grid-row: 1 / -1只控制占位区域，不改变sticky的滚动参照物——它还是认整个 Grid 容器为祖先 - Grid 中没有
span all，写grid-row: 1 / span all直接被忽略 - 给主内容区加
overflow-y: auto？那侧边栏就真成“固定”了，和内容滚动完全脱钩 - 用
grid-template-areas声明"sidebar main"然后指望sticky自动适配？区域声明不管滚动逻辑，只管初始布局
最容易被忽略的是：你写的 sticky 样式是否真的生效？打开 DevTools 的 “Computed” 面板，搜 position，确认值是 sticky 而不是被 relative 或 static 覆盖；再看 top 是否计算为 0px，而不是 auto——后者说明没有可吸附的滚动祖先。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
