如何根据滚动距离修改多个CSS属性值？

嘿，这个需求我之前做类似滚动动效时碰到过，用JavaScript就能轻松实现，而且做好性能优化的话体验会很棒～下面给你捋个清晰的实现思路和代码示例：

核心逻辑思路 #

我们要监听页面的滚动事件，获取当前滚动距离后分阶段处理：

• 第一阶段：当滚动距离在0-300px之间时，让#one的top值从0线性降到-300px
• 第二阶段：滚动距离超过300px后，固定#one的top为-300px，开始动态调整#two的top值（规则可以根据你的需求自定义）

完整代码实现 #

HTML结构示例 #

<div id="one" class="scroll-element">元素一</div>
<div id="two" class="scroll-element">元素二</div>

基础CSS样式 #

.scroll-element {
  position: fixed;
  top: 0;
  left: 20px;
  width: 100px;
  height: 100px;
  transition: none; /* 不需要CSS过渡，JS会实时计算值 */
}

#one {
  background: #ff6347;
}

#two {
  background: #4682b4;
  top: 120px; /* 初始位置可以根据需求调整 */
}

JavaScript核心逻辑（带性能优化） #

// 获取目标元素
const one = document.getElementById('one');
const two = document.getElementById('two');

// 节流函数：控制滚动事件触发频率，避免页面卡顿
function throttle(func, delay = 16) {
  let lastTriggerTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTriggerTime >= delay) {
      func.apply(this, args);
      lastTriggerTime = now;
    }
  };
}

// 处理滚动逻辑的核心函数
function handleScroll() {
  const scrollDistance = window.scrollY;
  
  // 第一阶段：处理#one的top值
  if (scrollDistance <= 300) {
    // 线性计算：滚动多少px，top就减多少px，刚好滚动300px时top为-300px
    one.style.top = `-${scrollDistance}px`;
  } else {
    // 滚动超过300px，固定#one的top值
    one.style.top = '-300px';
    // 第二阶段：处理#two的top值，这里示例是滚动每多1px，top减1px（可自定义规则）
    const extraScroll = scrollDistance - 300;
    // 给#two的top设置最小值，防止无限上移（这里设为-200px，可修改）
    const twoTargetTop = Math.max(-200, -extraScroll);
    two.style.top = `${twoTargetTop}px`;
  }
}

// 给窗口添加节流后的滚动监听
window.addEventListener('scroll', throttle(handleScroll));

// 页面加载时先执行一次，确保初始状态正确（比如刷新时页面已滚动的情况）
handleScroll();

关键细节说明 #

• 节流优化：滚动事件会高频触发，用节流函数把触发频率控制在约60帧/秒（16ms一次），避免页面卡顿
• 分阶段控制：通过判断滚动距离的范围，清晰划分每个元素的调整阶段，逻辑易维护
• 边界限制：给#two的top设置最小值（比如示例中的-200px），防止元素无限上移超出预期
• 自定义规则：如果#two的top变化需要非线性（比如滚动速度减半），只需要修改第二阶段的计算逻辑，比如改成const twoTargetTop = Math.max(-200, -(extraScroll * 0.5));

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