实现分屏滚动与粘性侧边内容切换效果教程

<div class="scroll-content-before">
  <p>顶部滚动内容，用于提供初始滚动空间。</p>
  <p>...</p>
</div>

<div class="main-split-section">
  <div class="sticky-panel">
    <!-- 粘性部分的内容，例如图片、视频或动态组件 -->
    <img src="image1.jpg" alt="描述1" class="sticky-image active">
    <img src="image2.jpg" alt="描述2" class="sticky-image">
    <img src="image3.jpg" alt="描述3" class="sticky-image">
    <!-- 更多图片或内容 -->
  </div>
  <div class="flow-panel">
    <!-- 流动部分的内容，用户将滚动这些段落 -->
    <p class="scroll-trigger" data-image-index="0">这是第一段滚动内容。当用户滚动到这里时，右侧的图片将显示第一张。</p>
    <p class="scroll-trigger" data-image-index="1">这是第二段滚动内容。当用户滚动到这里时，右侧的图片将显示第二张。</p>
    <p class="scroll-trigger" data-image-index="2">这是第三段滚动内容。当用户滚动到这里时，右侧的图片将显示第三张。</p>
    <p>...</p>
  </div>
</div>

<div class="scroll-content-after">
  <p>底部滚动内容，用于提供后续滚动空间。</p>
  <p>...</p>
</div>

/* 主分屏容器 */
.main-split-section {
  display: flex; /* 使用Flexbox创建分屏 */
  min-height: 100vh; /* 确保容器至少占据一个视口高度 */
  position: relative; /* 为 sticky 元素提供定位上下文 */
}

/* 粘性面板样式 */
.sticky-panel {
  flex: 1; /* 占据可用空间的一半 */
  position: sticky; /* 使元素在滚动时保持粘性 */
  top: 0; /* 粘性元素吸附在视口顶部 */
  height: 100vh; /* 粘性元素高度与视口高度一致 */
  overflow: hidden; /* 隐藏超出容器的图片部分 */
  /* background: salmon; /* 示例背景色 */
  display: flex; /* 内部图片也可能需要flex布局 */
  justify-content: center;
  align-items: center;
}

.sticky-panel .sticky-image {
  position: absolute; /* 使图片叠放 */
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.5s ease-in-out; /* 切换时的过渡效果 */
  max-width: 90%; /* 限制图片大小 */
  max-height: 90%;
  object-fit: contain; /* 保持图片比例 */
}

.sticky-panel .sticky-image.active {
  opacity: 1; /* 激活时显示 */
}

/* 流动面板样式 */
.flow-panel {
  flex: 1; /* 占据可用空间的一半 */
  /* background: slateblue; /* 示例背景色 */
  padding: 20px; /* 增加内边距 */
  box-sizing: border-box; /* 确保padding不增加宽度 */
}

/* 滚动内容段落样式 */
.flow-panel p {
  height: 50vh; /* 每个段落占据半个视口高度，方便触发滚动事件 */
  display: flex; /* 垂直居中内容 */
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.5em;
  margin: 0; /* 移除默认外边距 */
  border-bottom: 1px solid #eee; /* 区分段落 */
}

/* 辅助滚动内容 */
.scroll-content-before,
.scroll-content-after {
  height: 100vh; /* 提供足够的滚动空间 */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
  font-size: 1.2em;
  color: #555;
}

document.addEventListener('DOMContentLoaded', () => {
  const flowPanel = document.querySelector('.flow-panel');
  const stickyImages = document.querySelectorAll('.sticky-panel .sticky-image');
  const scrollTriggers = document.querySelectorAll('.flow-panel .scroll-trigger');

  // 初始化显示第一张图片
  if (stickyImages.length > 0) {
    stickyImages[0].classList.add('active');
  }

  // 使用 Intersection Observer 监听滚动触发点
  const observerOptions = {
    root: null, // 视口作为根
    rootMargin: '0px 0px -50% 0px', // 当触发元素中心进入视口时触发
    threshold: 0 // 元素进入视口即可触发
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 获取当前进入视口的触发段落的索引
        const index = parseInt(entry.target.dataset.imageIndex);

        // 移除所有图片的 active 类
        stickyImages.forEach(img => img.classList.remove('active'));

        // 激活对应索引的图片
        if (stickyImages[index]) {
          stickyImages[index].classList.add('active');
        }
      }
    });
  }, observerOptions);

  // 观察每个滚动触发点
  scrollTriggers.forEach(trigger => {
    observer.observe(trigger);
  });
});