Bootstrap实现多列滚动时依次固定效果的方法咨询

嘿，我刚好折腾过类似的滚动固定需求，结合Bootstrap的网格系统，用CSS+少量JS就能搞定你要的「列1先滚动→列2固定→列3固定」的效果。下面分两种方案来给你拆解：

方案1：纯CSS快速实现（基于position: sticky） #

这个方案适合不需要太精确触发时机的场景，利用CSS的sticky定位特性，通过设置不同的top值让三个列依次进入固定状态。

HTML结构（Bootstrap网格） #

<div class="container my-4">
  <div class="row g-4">
    <!-- 列1：初始随页面滚动 -->
    <div class="col-md-4">
      <div class="column-content column-1">
        <h3>列1内容</h3>
        <p>这里放列1的长内容，让页面能滚动起来...</p>
        <!-- 可以加更多内容让列1足够长 -->
      </div>
    </div>
    <!-- 列2：滚动到距离顶部2rem时固定 -->
    <div class="col-md-4">
      <div class="column-content column-2">
        <h3>列2内容</h3>
        <p>滚动一段距离后我会固定在顶部</p>
      </div>
    </div>
    <!-- 列3：滚动到距离顶部4rem时固定 -->
    <div class="col-md-4">
      <div class="column-content column-3">
        <h3>列3内容</h3>
        <p>我会比列2晚一点固定</p>
      </div>
    </div>
  </div>
  <!-- 模拟长页面内容，测试滚动 -->
  <div class="spacer mt-4" style="height: 2000px; background-color: #f8f9fa;"></div>
</div>

CSS样式 #

/* 给列内容加基础样式，方便观察效果 */
.column-content {
  padding: 1.5rem;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.column-1 {
  background-color: #f8f9fa;
  /* 列1不设置sticky，全程随页面滚动 */
  min-height: 800px; /* 让列1足够长 */
}

.column-2 {
  background-color: #e9ecef;
  position: sticky;
  top: 2rem; /* 滚动到距离顶部2rem时触发固定 */
}

.column-3 {
  background-color: #dee2e6;
  position: sticky;
  top: 4rem; /* 比列2多2rem的触发阈值，实现依次固定 */
}

/* 关键：给列的父容器设置最小高度，确保sticky能正常工作 */
.row .col-md-4 {
  min-height: 100vh;
}

方案2：JS辅助实现（精确控制触发时机） #

如果需要更精准的触发逻辑（比如基于列1滚动到底部后再固定列2），可以用JavaScript监听滚动事件，动态给列添加固定类。

调整后的CSS #

/* 基础样式和方案1一致，新增sticky固定类 */
.column-content {
  padding: 1.5rem;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.column-1 {
  background-color: #f8f9fa;
  min-height: 800px;
}

.column-2 {
  background-color: #e9ecef;
  min-height: 600px;
}

.column-3 {
  background-color: #dee2e6;
  min-height: 400px;
}

/* 固定类：脱离文档流固定在顶部 */
.sticky-fixed {
  position: fixed;
  top: 2rem;
  width: calc(33.333% - 1.5rem); /* 对应Bootstrap col-md-4的宽度，减去gutter */
}

/* 适配Bootstrap的gutter */
.row {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.col-md-4 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

JavaScript代码 #

// 获取三个列的DOM元素
const col1 = document.querySelector('.column-1');
const col2 = document.querySelector('.column-2');
const col3 = document.querySelector('.column-3');

// 监听滚动事件
window.addEventListener('scroll', () => {
  const scrollTop = window.scrollY;
  const windowHeight = window.innerHeight;

  // 计算列2的触发阈值：列1底部距离顶部的位置 - 窗口高度 + 偏移量
  const col2Trigger = col1.offsetTop + col1.offsetHeight - windowHeight + 50;
  // 计算列3的触发阈值：基于列2的触发位置 + 列2的高度 - 偏移量
  const col3Trigger = col2Trigger + col2.offsetHeight - 50;

  // 控制列2的固定/取消固定
  if (scrollTop >= col2Trigger) {
    col2.classList.add('sticky-fixed');
  } else {
    col2.classList.remove('sticky-fixed');
  }

  // 控制列3的固定/取消固定
  if (scrollTop >= col3Trigger) {
    col3.classList.add('sticky-fixed');
  } else {
    col3.classList.remove('sticky-fixed');
  }
});

注意事项 #

• 如果你用Bootstrap的响应式断点（比如col-md-4），记得在CSS中针对不同屏幕宽度调整固定元素的宽度。
• position: sticky需要父容器有明确的高度或者不会被其他元素截断，否则可能不生效。
• 测试时确保页面有足够长的内容，能触发滚动效果。

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