如何实现元素opacity随页面滚动位置动态变化的交互效果

核心逻辑是通过监听滚动状态，计算目标元素和视口的相对位置，将位置占比映射为0~1的不透明度值即可实现需求。

基础实现（原生JS+CSS） #

第一步：给目标元素添加基础样式 #

/* 替换为你自己的目标元素选择器 */
.fade-element {
  opacity: 0;
  /* 可选：添加过渡动画让透明度变化更顺滑 */
  transition: opacity 0.1s linear;
}

第二步：添加滚动监听逻辑 #

const targetEl = document.querySelector('.fade-element');

function calcOpacity() {
  // 获取元素相对视口的位置信息
  const rect = targetEl.getBoundingClientRect();
  // 获取当前视口高度
  const viewHeight = window.innerHeight;
  
  // 计算规则：元素顶部刚进入视口底部时透明度为0，元素顶部到达视口顶部时透明度为1
  // 可自行调整计算规则适配你的触发区间需求
  let opacity = 1 - (rect.top / viewHeight);
  // 限制不透明度范围在0~1之间，避免出现非法值
  opacity = Math.max(0, Math.min(1, opacity));
  
  targetEl.style.opacity = opacity;
}

// 页面加载完成后执行一次，避免初始滚动位置已在目标区域时不生效
window.addEventListener('load', calcOpacity);
// 绑定滚动事件
window.addEventListener('scroll', calcOpacity);

自定义触发区间 #

如果需要调整透明度开始、结束变化的位置，比如要求元素进入视口30%时开始提升透明度，进入视口80%时完全显示，可以修改计算逻辑：

function calcOpacity() {
  const rect = targetEl.getBoundingClientRect();
  const viewHeight = window.innerHeight;
  
  // 触发起始位置：元素顶部距离视口顶部还有70%视口高度时（即进入视口30%）开始变化
  const startPoint = viewHeight * 0.7;
  // 触发结束位置：元素顶部距离视口顶部还有20%视口高度时（即进入视口80%）完全不透明
  const endPoint = viewHeight * 0.2;
  
  let opacity = (startPoint - rect.top) / (startPoint - endPoint);
  opacity = Math.max(0, Math.min(1, opacity));
  targetEl.style.opacity = opacity;
}

性能优化方案 #

1. 节流处理滚动事件 #

滚动事件触发频率极高，添加节流逻辑可以避免不必要的性能损耗：

// 简易节流函数：100ms内最多执行一次，可自行调整间隔时长
function throttle(func, delay = 100) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  }
}

// 绑定节流后的处理函数
window.addEventListener('scroll', throttle(calcOpacity));

2. 使用Intersection Observer实现（更推荐） #

现代浏览器支持的Intersection Observer API不需要持续监听滚动事件，性能更好，适合多元素场景：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // entry.intersectionRatio为元素当前在视口的可见比例，范围0~1，直接赋值给opacity即可
    targetEl.style.opacity = entry.intersectionRatio;
  })
}, {
  // 配置每1%的可见比例变化就触发一次回调，保证过渡平滑
  threshold: Array.from({length: 101}, (_, i) => i / 100)
})

// 开始监听目标元素
observer.observe(targetEl);

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