仅用Vanilla JavaScript和CSS修复侧边栏Sticky滚动异常问题

你遇到的异常是因为Grid布局默认会将所有网格项的高度拉伸至最高子元素的高度（即主内容的2000px），而position: sticky元素是相对于其父网格项定位的——当滚动到元素底部与网格项底部的相对位置达到临界值时，元素就会停止固定并跟随网格项滚动，这就是为什么滚动到页面50%位置时侧边栏开始跟随滚动。

方案1：调整Grid布局对齐方式（纯CSS） #

修改main的CSS，添加align-items: start，让网格项高度自适应内容而非强制拉伸：

main {
    margin: auto;
    padding: 10px 0px;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 70% 30%;
    align-items: start; /* 新增：让网格项高度自适应内容 */
}

.sidebar {
    background-color: green;
    height: 1000px;
    margin-left: 5px;
    color: white;
    padding: 10px 0px 0px 10px;
    position: sticky;
    top: 0; 
    /* 移除align-self: flex-start，grid布局用align-items统一控制 */
}

修改后，侧边栏的网格项高度会匹配自身内容（1000px），sticky效果恢复正常：从上往下滚动时，侧边栏到达视口顶部后固定，直到网格项底部离开视口时才会跟随滚动。

方案2：改用Flex布局（纯CSS） #

如果Grid布局的限制难以适配，切换到Flex布局可以更直观地实现需求：

main {
    margin: auto;
    padding: 10px 0px;
    display: flex;
    gap: 10px; /* 替代grid-gap，控制两栏间距 */
}

.main-content {
    flex: 7; /* 占7份宽度 */
    background-color: red;
    height: 2000px;
    color: white;
    padding: 10px 0px 0px 10px;
}

.sidebar {
    flex: 3; /* 占3份宽度 */
    background-color: green;
    height: 1000px;
    color: white;
    padding: 10px 0px 0px 10px;
    align-self: flex-start; /* 防止被拉伸至主内容高度 */
    position: sticky;
    top: 0; 
}

方案3：Vanilla JS控制（适配固定到Footer的需求） #

如果需要侧边栏一直固定到Footer出现时再跟随滚动，可以用原生JS监听滚动事件：

const sidebar = document.querySelector('.sidebar');
const footer = document.querySelector('footer');
const mainPadding = 10; // 对应main的padding值

window.addEventListener('scroll', () => {
    const footerTop = footer.getBoundingClientRect().top;
    const sidebarHeight = sidebar.offsetHeight;

    // 当Footer进入视口范围，且侧边栏底部会超出Footer顶部时，调整定位
    if (footerTop <= sidebarHeight + mainPadding) {
        sidebar.style.position = 'relative';
        sidebar.style.top = `${footerTop - sidebarHeight - mainPadding}px`;
    } else {
        // 恢复sticky定位
        sidebar.style.position = 'sticky';
        sidebar.style.top = '0';
    }
});

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