如何实现页面滚动时侧边栏与内容的动态粘性定位？

1. 修复核心CSS问题 #

首先移除.category-filter中的height: 100%——这个属性是导致sticky行为不符合预期的关键：它会强制侧边栏高度与父容器（由内容区域撑开）一致，使得sticky的“粘性”范围被限制在父容器内部，只有当父容器完全离开视口时，侧边栏才会跟随滚动。

修改后的侧边栏CSS：

.category-filter {
  position: sticky;
  top: 0;
  /* 可选：设置侧边栏最大高度，避免内容过长时超出视口 */
  max-height: calc(100vh - 60px); /* 减去header高度，假设header高60px */
  overflow-y: auto; /* 侧边栏内容超出时显示内部滚动条 */
}

2. 确保父容器布局正确 #

如果使用Bootstrap栅格，.row默认已是flex布局，只需补充以下样式确保子元素对齐方式正确，同时避免sticky失效：

.category-page {
  display: flex;
  align-items: flex-start; /* 让侧边栏和内容区域从顶部对齐 */
  gap: 1rem; /* 可选：给两个区域添加间距 */
}

3. 实现“先到末尾则固定”的效果 #

• 当内容区域比侧边栏长时：滚动页面，侧边栏会随页面向上移动，直到其顶部到达视口顶部（top:0生效），之后保持固定，内容区域继续滚动。
• 当侧边栏比内容区域长时：滚动页面，内容区域会随页面向上移动，直到其顶部到达视口顶部后保持固定；若设置了max-height和overflow-y: auto，侧边栏的超出部分可通过内部滚动条查看。

如果不需要侧边栏内部滚动，仅希望侧边栏整体固定在视口，可去掉max-height和overflow-y: auto属性，此时侧边栏会一直固定在顶部，直到其底部完全离开视口后才会跟随滚动。

内容的提问来源于stack exchange，提问作者user13371545