复刻带粘性侧边栏的分屏滚动切换图片效果

核心实现思路 #

• 右侧图片容器用position: sticky实现滚动到指定位置后固定在屏幕中心
• 左侧文本区域设置足够高度，保证滚动过程中能依次触发不同文本区块的可见性判断
• 通过监听滚动事件，匹配当前视口中的文本区块，切换对应图片的显示状态

HTML结构 #

<div class="container">
  <!-- 左侧文本区 -->
  <div class="text-section">
    <div class="text-block">
      <h2>让日程安排更简单</h2>
      <p>无需来回邮件确认，一键敲定合适时间，节省你的沟通成本</p>
    </div>
    <div class="text-block">
      <h2>智能时区适配</h2>
      <p>自动识别参会者时区，避免时间混乱，全球协作更顺畅</p>
    </div>
    <div class="text-block">
      <h2>自定义预约规则</h2>
      <p>设置可预约时段、时长，自动过滤冲突，让你的时间更可控</p>
    </div>
  </div>

  <!-- 右侧图片区 -->
  <div class="image-container">
    <img src="img1.jpg" class="sticky-image active" alt="简化日程">
    <img src="img2.jpg" class="sticky-image" alt="时区适配">
    <img src="img3.jpg" class="sticky-image" alt="自定义规则">
  </div>
</div>

CSS样式 #

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

.text-section {
  /* 给文本区设置足够高度，确保滚动时有切换空间 */
  height: 200vh;
}

.text-block {
  /* 每个文本块占文本区1/3高度，可根据区块数量调整 */
  height: calc(100% / 3);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.image-container {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  height: 500px;
  width: 100%;
  overflow: hidden;
}

.sticky-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.sticky-image.active {
  opacity: 1;
}

JavaScript逻辑 #

const textBlocks = document.querySelectorAll('.text-block');
const images = document.querySelectorAll('.sticky-image');

function updateActiveImage() {
  const viewportMidpoint = window.innerHeight / 2;

  textBlocks.forEach((block, index) => {
    const rect = block.getBoundingClientRect();
    // 判断当前文本块是否覆盖视口中点，触发图片切换
    if (rect.top < viewportMidpoint && rect.bottom > viewportMidpoint) {
      images.forEach(img => img.classList.remove('active'));
      images[index].classList.add('active');
    }
  });
}

// 监听滚动事件
window.addEventListener('scroll', updateActiveImage);
// 页面加载时初始化一次
updateActiveImage();

关键细节说明 #

1. 粘性定位实现：position: sticky配合top:50%和transform: translateY(-50%)，让图片容器精准固定在屏幕垂直中心，不会随滚动偏移。
2. 文本区块高度：文本区设置200vh是为了让滚动过程中每个文本块能依次进入视口中点区域，你可以根据实际区块数量调整这个高度，或者给每个文本块单独设置固定高度。
3. 图片切换逻辑：通过getBoundingClientRect()获取文本块在视口中的位置，当区块覆盖视口中点时，切换对应图片的active类，利用CSS过渡实现平滑淡入淡出。

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