滚动时固定显示图片并实现滚动动画的技术实现方法咨询

核心原理 #

这类效果本质是监听滚动事件，结合CSS定位和JavaScript动态计算滚动偏移量来控制元素的位置与动画状态。

实现步骤 #

1. 布局结构设计 #

先搭建基础HTML结构，把需要固定的元素放在一个容器内，容器用来划定固定生效的范围：

<div class="scroll-section">
  <div class="fixed-content">
    <!-- 这里放要固定的图片/设计内容 -->
    <img src="your-image.jpg" alt="固定展示内容">
  </div>
  <!-- 填充足够高度的内容，让页面能滚动 -->
  <div class="spacer"></div>
</div>

2. 基础CSS设置 #

• 给滚动容器设置相对定位，作为固定元素的参考；
• 初始状态下，固定元素使用绝对定位；
• 当滚动到目标范围时，切换为固定定位；
• 给动画元素预设过渡或关键帧动画：

.scroll-section {
  position: relative;
  height: 200vh; /* 让容器足够高，触发滚动 */
}

.fixed-content {
  position: absolute;
  top: 100px; /* 初始距离顶部的位置 */
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.1s ease; /* 平滑动画过渡 */
}

.fixed-content.fixed {
  position: fixed;
  top: 100px;
}

/* 示例：滚动时的缩放动画 */
.fixed-content.animate {
  transform: translateX(-50%) scale(1.2);
}

3. JavaScript逻辑实现 #

核心是监听scroll事件，计算滚动偏移量，判断元素是否进入固定范围，同时根据滚动方向/距离触发动画：

const scrollSection = document.querySelector('.scroll-section');
const fixedContent = document.querySelector('.fixed-content');

window.addEventListener('scroll', () => {
  const sectionTop = scrollSection.offsetTop;
  const sectionBottom = sectionTop + scrollSection.offsetHeight;
  const scrollY = window.scrollY;
  const viewportHeight = window.innerHeight;

  // 判断是否进入固定范围：滚动到容器顶部下方，且未超出容器底部
  if (scrollY >= sectionTop && scrollY <= sectionBottom - viewportHeight) {
    fixedContent.classList.add('fixed');
    // 根据滚动距离计算动画进度，比如缩放比例
    const scrollProgress = (scrollY - sectionTop) / (sectionBottom - viewportHeight - sectionTop);
    fixedContent.style.transform = `translateX(-50%) scale(${1 + scrollProgress * 0.3})`;
  } else {
    fixedContent.classList.remove('fixed');
    fixedContent.style.transform = 'translateX(-50%)';
  }
});

关键细节优化 #

• 使用requestAnimationFrame优化滚动事件性能，避免频繁触发导致卡顿：

let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      // 这里放之前的滚动逻辑
      ticking = false;
    });
    ticking = true;
  }
});

• 针对不同设备的滚动行为（比如移动端的惯性滚动），可以添加防抖处理；
• 固定元素的z-index要设置合理，避免被其他内容遮挡。

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