工作流区域粘性卡片滚动效果实现问题求助

大家好，我正在尝试实现一个滚动时切换粘性工作流卡片的效果，但折腾了一整天都没解决问题，目前遇到的具体问题如下：

• 标题“Our Workflow”的粘性切换逻辑完全不按预期工作
• 所有工作流卡片都保持静态状态，没有任何滚动切换或动画效果，一直固定在页面上不动

我本来准备了问题截图，但暂时无法上传。下面是我当前的HTML、CSS和JavaScript实现代码，希望各位能帮我排查问题，或者分享一个可运行的类似效果实现，真的非常感谢！

HTML 结构（相关部分） #

<link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

<section id="workflow" class="workflow">
  <h2>Our Workflow</h2>
  <div class="workflow-sticky-container">
    <div class="workflow-sticky-content">
      <div class="workflow-card">
        <div class="left-section">
          <div class="icon">🔧</div>
          <div class="label">Step 1</div>
        </div>
        <div class="right-section">
          <h3>Initial Consultation</h3>
          <p>We discuss your project requirements and goals to create a tailored plan.</p>
        </div>
      </div>
      <!-- 更多 workflow-card 重复结构示例 -->
      <div class="workflow-card">
        <div class="left-section">
          <div class="icon">🚀</div>
          <div class="label">Step 2</div>
        </div>
        <div class="right-section">
          <h3>Project Launch</h3>
          <p>We deploy your project and provide post-launch support to ensure everything runs smoothly.</p>
        </div>
      </div>
    </div>
  </div>
</section>

CSS 样式 #

.workflow {
  position: relative;
  padding: 80px 20px;
  background: #0F0F1A;
  color: #fff;
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.workflow h2 {
  font-size: 42px;
  color: #00FFFF;
  margin-bottom: 40px;
  position: sticky;
  top: 120px;
  z-index: 10;
  background: linear-gradient(180deg, #0F0F1A 80%, rgba(15, 15, 26, 0));
  padding: 20px 0 40px;
  margin-top: -20px;
  transition: all 0.3s ease;
}

.workflow h2.scrolled-past {
  position: relative;
  top: auto;
  background: transparent;
}

/* Sticky Scroll Container */
.workflow-sticky-container {
  position: relative;
  width: 100%;
  height: 400vh; /* 4x viewport height for 4 cards */
}

.workflow-sticky-content {
  position: sticky;
  top: 220px; /* Adjusted to account for sticky header and heading */
  height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Original Workflow Cards */
.workflow-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 90%;
  max-width: 800px;
  background: linear-gradient(145deg, #1A1A2E, #141421);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  display: flex;
  transform: translateX(-50%) translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease;
  will-change: transform, opacity;
  z-index: 1;
}

.workflow-card.active {
  transform: translateX(-50%) translateY(0%);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.workflow-card .left-section {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-right: 1px solid #2a2a42;
}

.workflow-card .icon {
  font-size: 100px;
  color: #00FFFF;
  margin-bottom: 20px;
}

.workflow-card .label {
  font-size: 18px;
  color: #FF00C7;
  font-weight: bold;
  text-transform: uppercase;
}

.workflow-card .right-section {
  width: 50%;
  padding: 20px;
  text-align: left;
}

.workflow-card h3 {
  font-size: 28px;
  margin: 15px 0 15px;
  color: white;
}

.workflow-card p {
  font-size: 18px;
  color: #b9b9b9;
  line-height: 1.6;
  margin: 0;
}

.workflow-card:hover {
  transform: translateX(-50%) translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.workflow-card.active:hover {
  transform: translateX(-50%) translateY(-5px);
}

JavaScript 逻辑 #

// Sticky Card Scroll Effect for Workflow Section
document.addEventListener("DOMContentLoaded", function() {
  const workflowSection = document.querySelector("#workflow");
  const workflowHeading = document.querySelector(".workflow h2");
  const stickyContainer = document.querySelector(".workflow-sticky-container");
  const stickyContent = document.querySelector(".workflow-sticky-content");
  const cards = Array.from(document.querySelectorAll(".workflow-card"));

  // Set the height of the sticky container based on number of cards
  stickyContainer.style.height = `${cards.length * 100}vh`;

  // Initialize the first card as active
  cards.forEach((card, index) => {
    if (index === 0) {
      card.classList.add("active");
    } else {
      card.classList.remove("active");
    }
  });

  // Scroll event listener for the sticky effect
  window.addEventListener("scroll", function() {
    const workflowTop = workflowSection.offsetTop;
    const workflowHeight = workflowSection.offsetHeight;
    const scrollPosition = window.scrollY;
    const viewportHeight = window.innerHeight;

    // Check if we're in the workflow section
    if (scrollPosition >= workflowTop && scrollPosition <= workflowTop + workflowHeight) {
      // Calculate which card should be active based on scroll position
      const scrollProgress = (scrollPosition - workflowTop) / (workflowHeight - viewportHeight);
      const activeIndex = Math.min(
        Math.floor(scrollProgress * cards.length),
        cards.length - 1
      );

      // Update active card
      cards.forEach((card, index) => {
        if (index === activeIndex) {
          card.classList.add("active");
        } else {
          card.classList.remove("active");
        }
      });

      // Check if we've scrolled past the last card
      if (scrollPosition >= workflowTop + workflowHeight - viewportHeight * 0.8) {
        workflowHeading.classList.add("scrolled-past");
      } else {
        workflowHeading.classList.remove("scrolled-past");
      }
    } else {
      // Reset when not in workflow section
      workflowHeading.classList.remove("scrolled-past");
    }
  });
});

希望各位能帮我找出问题所在，或者提供一个可运行的类似效果实现思路，非常感谢！

内容来源于stack exchange