滚动时调整页眉透明度故障：现有代码仅实现图片位移，透明度无变化

我帮你排查了代码，问题其实很直白——你已经算出了opacity变量，但完全没把这个值应用到页眉元素上！浏览器根本不知道你要改变透明度，自然没效果啦。另外原代码里的透明度计算逻辑也可以调整得更合理，下面是修复后的方案：

问题分析 #

1. 缺失透明度赋值：你只计算了opacity，但没有执行类似header.css('opacity', opacity)的赋值操作
2. 边界值处理不足：没有考虑滚动回到阈值上方时的透明度重置，也没限制opacity的取值范围（避免出现负数）
3. 透明度计算逻辑可以优化：原代码(scrollPos * 1) / 470会让opacity从0涨到1，这和“淡出”（从1降到0）的需求相反

修复后的完整代码 #

$(window).scroll(function(e) {
  var scrolled = $(window).scrollTop();
  var header = $('.site-header');
  
  // 原有图片移动逻辑，保持不变
  header.css('top', -(scrolled) * 0.5 + 'px');
  
  // 计算触发淡出的滚动阈值（距离底部470px的位置）
  var bottomThreshold = $(document).height() - $(window).height() - 470;
  
  if (scrolled > bottomThreshold) {
    // 计算超出阈值的滚动距离
    var scrollPos = scrolled - bottomThreshold;
    // 计算透明度：从1平滑降到0（scrollPos从0到470时，opacity从1到0）
    var opacity = 1 - (scrollPos / 470);
    // 确保透明度不会低于0（避免滚动超过底部后出现异常）
    opacity = Math.max(0, opacity);
    // 把透明度值应用到页眉元素
    header.css('opacity', opacity);
  } else {
    // 当滚动回到阈值上方时，恢复页眉完全不透明
    header.css('opacity', 1);
  }
});

额外优化建议 #

如果想要更平滑的淡出过渡效果，可以给.site-header添加CSS过渡属性：

.site-header {
  transition: opacity 0.3s ease, top 0.3s ease;
}

这样页眉的移动和淡出都会有平滑的动画，体验更好。

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