如何制作随滚动跟随且在页脚处停止的固定侧边栏？

我明白你的痛点——用position: fixed会直接穿过页脚，而position: sticky又没达到预期效果。其实问题大多出在sticky的使用条件和缺少页脚碰撞检测上，下面给你一套可行的方案：

第一步：调整HTML结构 #

先给侧边栏内容套一个单独的容器，方便我们控制样式和行为：

<div class="row row-no-padding">
  <div class="col-lg-8">
    <!-- 这里放你的主内容，建议填充足够多的内容测试滚动效果 -->
    主内容区域...
  </div>
  <div class="col-lg-4">
    <!-- 新增的侧边栏容器 -->
    <div class="sticky-sidebar">
      侧边栏内容，滚动时会跟随，到达页脚自动停止
    </div>
  </div>
</div>

<!-- 你的页脚，确保有明确的类名方便获取 -->
<footer class="page-footer">
  页脚内容区域...
</footer>

第二步：基础CSS设置 #

首先让sticky-sidebar具备基础的粘性定位能力，同时给父容器和页脚加必要的样式：

/* 侧边栏基础粘性样式 */
.sticky-sidebar {
  position: sticky;
  top: 20px; /* 侧边栏距离顶部的间距，可根据需求调整 */
  min-height: fit-content; /* 确保高度自适应内容 */
}

/* 给侧边栏的父容器设置相对定位，为后续绝对定位做准备 */
.col-lg-4 {
  position: relative;
  min-height: 100vh; /* 保证父容器高度足够，避免定位异常 */
}

/* 页脚样式（示例，根据你的实际页脚调整） */
.page-footer {
  height: 300px; /* 模拟页脚高度，实际以你的内容为准 */
  background-color: #f8f9fa;
  margin-top: 50px;
}

第三步：添加JavaScript处理页脚碰撞 #

单纯的CSSsticky只会相对于父容器固定，无法感知页脚位置，所以需要JS监听滚动，当侧边栏即将碰到页脚时，切换定位方式让它停住：

// 获取元素
const stickySidebar = document.querySelector('.sticky-sidebar');
const footer = document.querySelector('.page-footer');

function adjustSidebarPosition() {
  if (!stickySidebar || !footer) return;

  // 获取页脚相对于视口的顶部位置
  const footerTop = footer.getBoundingClientRect().top;
  // 获取侧边栏相对于视口的底部位置
  const sidebarBottom = stickySidebar.getBoundingClientRect().bottom;
  // 获取侧边栏初始的top间距
  const initialTopOffset = parseInt(window.getComputedStyle(stickySidebar).top);

  // 当侧边栏底部即将碰到页脚时，切换为绝对定位
  if (sidebarBottom >= footerTop - initialTopOffset) {
    stickySidebar.style.position = 'absolute';
    // 计算让侧边栏停在页脚上方的top值
    const newTop = footerTop - window.scrollY - stickySidebar.offsetHeight - initialTopOffset;
    stickySidebar.style.top = `${newTop}px`;
  } else {
    // 否则恢复粘性定位
    stickySidebar.style.position = 'sticky';
    stickySidebar.style.top = `${initialTopOffset}px`;
  }
}

// 监听滚动和窗口 resize 事件
window.addEventListener('scroll', adjustSidebarPosition);
window.addEventListener('resize', adjustSidebarPosition);

// 初始化时执行一次，避免初始位置异常
adjustSidebarPosition();

为什么你之前的sticky没效果？ #

大概率是这两个原因：

• 父元素（比如.row或.col-lg-4）设置了overflow: hidden/auto/scroll，sticky定位要求父元素不能有这些溢出属性；
• 没有给sticky元素设置top/right/bottom/left中的任意一个值，这是sticky生效的必要条件。

这个方案既保留了sticky的自然跟随效果，又通过JS解决了页脚重叠的问题，适配各种屏幕尺寸，你可以根据自己的需求调整top间距和页脚样式。

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