如何使用jQuery根据滚动位置改变元素颜色？附HTML/CSS结构

嘿，这个需求我之前也帮人处理过，核心就是监听页面滚动事件，然后判断每个.post元素的位置来动态修改颜色。下面给你两种实用的实现方案，你可以根据需求选：

这种方式适合需要“元素滚进视野就变色，滚出就恢复”的场景：

// 监听页面滚动事件
$(window).on('scroll', function() {
  // 获取当前滚动距离和浏览器视口高度
  const scrollTop = $(this).scrollTop();
  const windowHeight = $(this).height();

  // 遍历所有带.post类的元素
  $('.post').each(function() {
    const $item = $(this);
    // 拿到元素顶部距离文档顶部的偏移量
    const itemTop = $item.offset().top;
    // 判断元素是否处于视口范围内
    const isVisible = (itemTop < scrollTop + windowHeight) && (itemTop + $item.height() > scrollTop);

    if (isVisible) {
      // 进入视口时改成你想要的颜色，比如蓝色
      $item.css('background-color', '#007bff');
      // 更推荐用类切换的方式（需要先定义.blue类）：
      // $item.removeClass('red').addClass('blue');
    } else {
      // 离开视口时恢复原来的红色
      $item.css('background-color', '#dc3545');
      // $item.addClass('red').removeClass('blue');
    }
  });
});

// 页面加载完成后主动触发一次滚动事件，确保初始可见元素的颜色正确
$(window).trigger('scroll');

如果想要更丝滑的过渡效果，可以让颜色随着元素与视口的距离动态变化：

$(window).on('scroll', function() {
  const scrollTop = $(this).scrollTop();
  const windowHeight = $(this).height();

  $('.post').each(function() {
    const $item = $(this);
    const itemTop = $item.offset().top;
    // 计算元素中心和视口中心的位置差
    const itemCenter = itemTop + $item.height() / 2;
    const viewportCenter = scrollTop + windowHeight / 2;
    // 把距离转换成0-1之间的比例值
    const distanceRatio = Math.min(Math.abs(itemCenter - viewportCenter) / windowHeight, 1);
    
    // 根据比例从红色渐变到蓝色（你可以自己调整RGB值）
    const redVal = Math.floor(255 * distanceRatio);
    const blueVal = Math.floor(255 * (1 - distanceRatio));
    $item.css('background-color', `rgb(${redVal}, 0, ${blueVal})`);
  });
});

$(window).trigger('scroll');

滚动事件会在滚动过程中频繁触发，容易导致性能问题，建议给滚动事件加节流处理：

let scrollTimer;
$(window).on('scroll', function() {
  // 每次滚动时清除之前的定时器
  clearTimeout(scrollTimer);
  // 延迟50毫秒再执行逻辑，减少触发次数
  scrollTimer = setTimeout(function() {
    // 把上面的元素处理逻辑放在这里
  }, 50);
});

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