侧边栏粘性定位(position: sticky)滚动至页面底部时上移的原因排查

安全阿岳

2026-4-14

嘿，我来帮你捋清楚这个问题～

首先得搞懂 position: sticky 的核心逻辑：粘性元素是相对于它的直接父容器生效的，当父容器的底部开始滚出视口时，粘性元素会跟着父容器一起移动，而不是一直固定在某个位置。

咱们来看你的代码布局问题：
你给 <body> 设置的 Grid 模板区域里，side-area 跨了主内容区和页脚区的行（也就是侧边栏的Grid区域从顶部导航下方一直延伸到页脚位置）。但你的页脚是单独的区块，当页面滚动到页脚出现时，侧边栏所在的Grid区域底部其实已经被页脚“挤”得向上收缩了，这时候父容器的底部开始离开视口，你的粘性侧边栏自然就跟着往上走了。

解决方案：调整Grid布局，让侧边栏和页脚不再共享Grid行

只需要修改 <body> 的 grid-template-areas，让页脚单独占满整行，不再和侧边栏重叠：

body {
    min-height: 100vh;
    min-width: 100vw;
    background-color: var(--light-color);
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
            'top-nav-area top-nav-area'
            'side-area main-area'
            'footer-area footer-area'; /* 这里修改了，页脚占满整行 */
}

同时可以把侧边栏的 min-height: calc(100vh - 82px) 去掉，因为现在它所在的Grid行是 1fr，会自动填充主内容区的高度，配合原来的 position: sticky; top: 82px; align-self: start; 就能正常工作：

.side-navigation {
    top: 82px;
    position: sticky;
    align-self: start;
    grid-area: side-area;
    background-color: var(--dark-color);
    overflow-y: auto;
}