实现滚动触发的粘性淡入淡出画廊（桌面端特效）

我来帮你搞定这个桌面端的固定图片淡入淡出效果，结合你现有的代码，咱们一步步来修改：

核心实现思路 #

1. 桌面端把图片容器固定在视口顶部右侧，保留你原有的position: fixed设置，调整定位参数确保在顶部
2. 给每张图片设置初始隐藏状态，加上过渡动画实现平滑的淡入淡出
3. 监听页面滚动，判断当前滚动位置对应的是哪个.step区块
4. 根据激活的区块，切换对应图片的显示状态，其他图片保持隐藏

修改后的完整代码 #

CSS 样式调整 #

body { 
  background-color: #000000; 
  color: #ffffff; 
  font-family: 'Arial', sans-serif; 
  font-size: 13px; 
}
p { 
  line-height: 1.56; 
  letter-spacing: 0.3px; 
  color: #878787; 
}
.step { 
  min-height: 90vh; 
  position: relative; /* 确保滚动位置计算准确 */
}
/* 桌面端固定图片容器到顶部右侧 */
.wrap-gallery { 
  position: fixed; 
  width: 45vw; 
  max-width: 600px; /* 可根据设计需求调整最大宽度 */
  right: 0; 
  top: 0; /* 固定到视口顶部 */
  height: 100vh; /* 让容器占满视口高度，方便图片对齐 */
  display: flex;
  align-items: flex-start; /* 图片顶部对齐，换成center可居中显示 */
}
.wrap-gallery img { 
  max-width: 100%; 
  height: auto; 
  position: absolute; 
  left: 0; 
  top: 0;
  opacity: 0; /* 默认隐藏所有图片 */
  transition: opacity 0.6s ease-in-out; /* 淡入淡出过渡动画 */
}
/* 默认显示第一张图片 */
.wrap-gallery img:first-child {
  opacity: 1;
}
/* 移动端隐藏固定图片容器，保留原有的移动端布局 */
@media (max-width: 767px) {
  .wrap-gallery {
    display: none;
  }
}

HTML 结构优化 #

给图片加上类名和data-step属性，方便JS精准控制：

<div class="container">
  <div class="wrap-gallery">
    <img src="https://loremflickr.com/500/380/dog" class="gallery-img" data-step="1">
    <img src="https://loremflickr.com/500/380/cat" class="gallery-img" data-step="2">
    <img src="https://loremflickr.com/500/380/bunny" class="gallery-img" data-step="3">
    <img src="https://loremflickr.com/500/380/bird" class="gallery-img" data-step="4">
  </div>
  <h2 class="d-block d-md-none">How the magic happens?</h2>
  <div class="row step step1">
    <div class="col-md-6">
      <h2 class="d-none d-md-block">How the magic happens?</h2>
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Elit eget gravida cum sociis natoque penatibus et magnis dis. Mus mauris vitae ultricies leo integer malesuada nunc.</p>
      <p>&nbsp;</p>
    </div>
    <div class="col-md-6 order-first order-md-last d-block d-md-none"><img src="https://loremflickr.com/500/380/dog"></div>
  </div>
  <div class="row step step2">
    <div class="col-md-6">
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Elit eget gravida cum sociis natoque penatibus et magnis dis. Mus mauris vitae ultricies leo integer malesuada nunc.</p>
    </div>
    <div class="col-md-6 order-first order-md-last d-block d-md-none"><img src="https://loremflickr.com/500/380/cat"></div>
  </div>
  <div class="row step step3">
    <div class="col-md-6">
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Elit eget gravida cum sociis natoque penatibus et magnis dis. Mus mauris vitae ultricies leo integer malesuada nunc.</p>
    </div>
    <div class="col-md-6 order-first order-md-last d-block d-md-none"><img src="https://loremflickr.com/500/380/bunny"></div>
  </div>
  <div class="row step step4">
    <div class="col-md-6">
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Elit eget gravida cum sociis natoque penatibus et magnis dis. Mus mauris vitae ultricies leo integer malesuada nunc.</p>
    </div>
    <div class="col-md-6 order-first order-md-last d-block d-md-none"><img src="https://loremflickr.com/500/380/bird"></div>
  </div>
</div>

JavaScript 滚动逻辑实现 #

添加滚动监听，结合防抖优化性能，实现图片切换：

// 获取页面元素
const steps = document.querySelectorAll('.step');
const galleryImgs = document.querySelectorAll('.gallery-img');
const viewportHeight = window.innerHeight;

// 防抖函数：减少滚动事件触发频率，提升性能
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// 处理滚动时的图片切换逻辑
function handleScroll() {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  steps.forEach((step, index) => {
    const stepTop = step.offsetTop;
    // 当区块进入视口1/3高度时触发图片切换（可根据需求调整阈值）
    const triggerPoint = stepTop - viewportHeight / 3;
    const exitPoint = stepTop + step.offsetHeight - viewportHeight / 3;

    if (scrollTop >= triggerPoint && scrollTop < exitPoint) {
      // 隐藏所有图片
      galleryImgs.forEach(img => img.style.opacity = '0');
      // 显示当前区块对应的图片
      const activeImg = document.querySelector(`.gallery-img[data-step="${index + 1}"]`);
      if (activeImg) activeImg.style.opacity = '1';
    }
  });
}

// 页面加载时初始化一次，确保默认显示正确的图片
handleScroll();

// 给滚动事件绑定防抖后的处理函数
window.addEventListener('scroll', debounce(handleScroll, 100));

关键细节说明 #

• 防抖函数：避免滚动事件频繁触发导致性能问题，这里设置的是100ms延迟，可根据需求调整
• 触发阈值：viewportHeight / 3表示当区块顶部进入视口1/3高度时切换图片，你可以改成viewportHeight / 2让切换时机更晚
• 过渡动画：CSS里的transition: opacity 0.6s ease-in-out控制淡入淡出的速度和平滑度，修改数值可调整动画快慢
• 响应式适配：媒体查询确保移动端隐藏固定图片容器，保留你原有的移动端布局逻辑

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