如何实现左侧固定右侧滚动，滚动到底部后左右均设为relative？

没问题！我帮你梳理一下实现这个需求的具体方案，直接上可运行的代码和关键思路，你可以直接套用或者调整细节~

核心思路 #

核心是通过监听右侧内容的滚动事件，判断是否滚动到了底部，然后动态切换CSS类来改变左侧栏和右侧内容的定位方式：

1. 初始状态：头部菜单固定在顶部，左侧栏固定定位，右侧内容单独滚动
2. 滚动到底部时：给容器添加类，让左侧栏和右侧内容都改为相对定位，这样两者会一起跟随页面滚动到页脚

1. HTML结构 #

先搭建基础的页面结构，包含头部、主体（左侧栏+右侧内容）、页脚：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动切换定位示例</title>
    <style>
        /* CSS样式写在这里 */
    </style>
</head>
<body>
    <header class="header">头部菜单（Fixed定位）</header>
    <div class="container">
        <aside class="sidebar">左侧固定栏</aside>
        <main class="content">
            <!-- 这里放足够多的测试内容，让右侧可以滚动 -->
            <p>测试内容 1</p>
            <p>测试内容 2</p>
            <p>测试内容 3</p>
            <p>测试内容 4</p>
            <p>测试内容 5</p>
            <p>测试内容 6</p>
            <p>测试内容 7</p>
            <p>测试内容 8</p>
            <p>测试内容 9</p>
            <p>测试内容 10</p>
            <p>测试内容 11</p>
            <p>测试内容 12</p>
            <p>测试内容 13</p>
            <p>测试内容 14</p>
            <p>测试内容 15</p>
            <p>测试内容 16</p>
            <p>测试内容 17</p>
            <p>测试内容 18</p>
            <p>测试内容 19</p>
            <p>测试内容 20</p>
            <p>测试内容 21</p>
            <p>测试内容 22</p>
            <p>测试内容 23</p>
            <p>测试内容 24</p>
            <p>测试内容 25</p>
            <p>测试内容 26</p>
            <p>测试内容 27</p>
            <p>测试内容 28</p>
            <p>测试内容 29</p>
            <p>测试内容 30</p>
        </main>
    </div>
    <footer class="footer">页脚内容</footer>
    <script>
        // JS逻辑写在这里
    </script>
</body>
</html>

2. CSS样式 #

设置初始的固定布局，以及滚动到底部时的样式切换：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding-top: 60px; /* 给固定的头部留出空间，避免内容被遮挡 */
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100; /* 确保头部在最上层 */
}

.container {
    display: flex;
    min-height: calc(100vh - 60px); /* 主体高度减去头部高度，占满剩余视口 */
}

.sidebar {
    width: 250px;
    background: #f5f5f5;
    padding: 20px;
    position: fixed;
    top: 60px; /* 从头部下方开始定位 */
    bottom: 0;
    transition: all 0.3s ease; /* 可选：添加过渡动画，让切换更平滑 */
}

.content {
    flex: 1;
    padding: 20px;
    margin-left: 250px; /* 给左侧固定栏留出空间 */
    overflow-y: auto;
    max-height: calc(100vh - 60px); /* 初始状态下右侧内容高度占满视口（除头部） */
}

/* 滚动到底部时的样式类 */
.container.scroll-bottom .sidebar {
    position: relative;
    top: auto;
    bottom: auto;
    height: auto;
}

.container.scroll-bottom .content {
    margin-left: 0;
    max-height: none;
    overflow-y: visible;
}

.footer {
    background: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
    margin-top: 20px;
}

3. JavaScript逻辑 #

监听右侧内容的滚动事件，判断是否滚动到底部，动态切换样式类：

const contentEl = document.querySelector('.content');
const containerEl = document.querySelector('.container');

contentEl.addEventListener('scroll', () => {
    // 判断是否滚动到了底部：滚动距离 + 可视高度 >= 内容总高度（减10是为了避免精度误差）
    const isScrolledToBottom = contentEl.scrollTop + contentEl.clientHeight >= contentEl.scrollHeight - 10;
    
    if (isScrolledToBottom) {
        containerEl.classList.add('scroll-bottom');
    } else {
        containerEl.classList.remove('scroll-bottom');
    }
});

关键细节说明 #

• 头部的position: fixed会脱离文档流，所以给body设置padding-top来避免主体内容被头部遮挡
• 初始状态下左侧栏用position: fixed固定在左侧，高度从头部下方延伸到页面底部
• 右侧内容设置max-height和overflow-y: auto，实现单独滚动的效果
• 滚动判断时减去10是为了处理浏览器的精度问题，避免因为微小的滚动差导致切换不及时
• 过渡动画是可选的，如果你不需要可以去掉transition属性

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