如何让fixed定位侧边栏在页脚处停止滚动

问题背景 #

页面左侧的固定定位侧边栏#sidebar_left，需要在滚动时避免覆盖页脚#footer，要求在距离页脚上方10px处停止滚动，且页脚高度不固定。

实现思路 #

通过监听页面滚动事件，实时计算页脚与侧边栏的位置关系，动态调整侧边栏的定位参数，实现滚动到临界位置时固定住侧边栏。

完整代码实现 #

CSS 调整

.home{
    min-height:100vh;
    position: relative; /* 为侧边栏切换定位提供参考 */
}
#sidebar_left {
    width: 20%;
    padding: 20px;
    position: fixed;
    min-height: 82vh;
    background-color: #fdfcfd;
    box-shadow: 0 1px 10px 1px #2680ff6b;
    margin-left: 6%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    scrollbar-width: none;
    overflow-x: hidden;
    overflow-y: scroll;
    top: 0;
    transition: top 0.2s ease; /* 平滑过渡效果 */
}

#footer {
    background-color: bisque;
    padding: 5px 0;
    text-align: center;
    margin-top: 10px;
    /* 不设置固定height，适配动态高度 */
}

HTML 结构（保持原结构即可）

<div class="home">
    <div id="sidebar_left">
        Content...<br>
        可添加更多内容测试滚动效果<br>
        内容1<br>内容2<br>内容3<br>内容4<br>内容5<br>内容6<br>内容7<br>内容8<br>内容9<br>内容10
    </div>
</div>
<div id="footer">
    页脚内容（高度不固定）<br>
    多行文字示例，高度随内容变化
</div>

JavaScript 逻辑

const sidebar = document.getElementById('sidebar_left');
const footer = document.getElementById('footer');
let sidebarHeight = sidebar.offsetHeight;
const gap = 10; // 侧边栏与页脚的间距

function adjustSidebarPosition() {
    const footerTop = footer.getBoundingClientRect().top;
    // 计算侧边栏可停留的最大top值
    const maxAllowedTop = window.innerHeight - sidebarHeight - gap;

    if (footerTop <= sidebarHeight + gap) {
        // 当页脚即将碰到侧边栏时，调整top值让侧边栏停在页脚上方
        const targetTop = footerTop - sidebarHeight - gap;
        sidebar.style.top = `${targetTop}px`;
    } else {
        // 未到达临界位置时，恢复初始固定定位
        sidebar.style.top = '0';
    }
}

// 页面加载时初始化位置
adjustSidebarPosition();
// 监听滚动事件实时调整
window.addEventListener('scroll', adjustSidebarPosition);
// 窗口大小变化时重新计算高度并调整
window.addEventListener('resize', () => {
    sidebarHeight = sidebar.offsetHeight;
    adjustSidebarPosition();
});

方案说明 #

1. 初始状态：侧边栏为fixed定位，top:0，跟随页面滚动
2. 滚动判断：通过getBoundingClientRect()获取页脚相对于视口的顶部位置，当该位置小于等于侧边栏高度+间距时，动态修改侧边栏的top值，使其停在页脚上方10px处
3. 适配处理：监听窗口大小变化事件，重新计算侧边栏高度，保证在不同屏幕尺寸下都能正常工作
4. 平滑过渡：添加transition属性让侧边栏位置变化更自然

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