给博客做响应式侧边栏的三个方案

需求

桌面端左侧边栏 sticky 跟随，窄屏下沉到文章后面，且不能和文章重叠。

方案对比

方案	思路	问题
纯 sticky	容器内 sticky	窄屏不取消 sticky 会叠在内容上
Grid order	窄屏下 order: -1 调整主内容在前	需配合取消 sticky
JS 滚动	手写监听	没必要，复杂度白给

最终方案

@media (max-width: 768px) {
  .home-layout { grid-template-columns: 1fr; }
  .home-main { order: -1; }
  .sidebar { position: static; }
}

一个 Astro 特有的坑

scoped 样式作用不到子组件根元素——父组件里写 .sidebar { position: static } 根本不生效。断点覆盖必须写在拥有该元素的组件里，或者用 :global()。

这个坑让我 debug 了一晚上，写下来希望能救人一命。