滚动事件异常：Header元素返回顶部无法恢复初始高度问题排查

你遇到的这个问题我之前做项目时也碰到过，咱们先拆解下核心症状：向下滚动时Header能正常变窄，但回到顶部时没法恢复原高度；而且如果在页面中间刷新后再回到顶部，Header只能恢复一次高度。这大概率是滚动事件监听里的逻辑判断或者初始值保存的问题，咱们结合你给出的代码片段来分析。

可能的问题根源 #

• 初始高度保存逻辑错误：你一开始用var height = 100硬写了固定高度，或者通过sourceCoord获取初始高度时时机不对——如果在页面中间刷新，此时Header已经是收缩后的状态，sourceCoord会把这个窄高度当成初始值，后续回顶自然没法恢复到真正的原始高度。
• 滚动事件的判断逻辑有漏洞：比如只处理了向下滚动的收缩逻辑，回顶时的触发条件写得不准确；或者没有做状态标记，导致滚动事件频繁触发时，重复执行修改样式的代码，打乱了状态判断。
• DOM元素获取时机不对：如果在页面还没完全加载时就获取Header元素，可能拿到的是未渲染完成的状态，高度值本身就错了。

修复后的代码实现 #

// 确保页面DOM完全加载后再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  const header = document.getElementById('header');
  // 保存页面加载时Header的真实初始高度，而非硬写死数值
  const originalHeight = header.offsetHeight;
  // 用状态标记避免重复修改DOM，解决"只能恢复一次"的问题
  let isHeaderShrunk = false;

  // 监听页面滚动事件
  window.addEventListener('scroll', function() {
    // 兼容不同浏览器的滚动距离获取方式
    const scrollDistance = window.pageYOffset || document.documentElement.scrollTop;

    // 滚动超过阈值时收缩Header（这里设为50px，可根据需求调整）
    if (scrollDistance > 50 && !isHeaderShrunk) {
      header.style.height = '60px'; // 替换成你需要的窄高度
      isHeaderShrunk = true;
    } 
    // 回到顶部附近时恢复原始高度
    else if (scrollDistance <= 50 && isHeaderShrunk) {
      header.style.height = `${originalHeight}px`;
      isHeaderShrunk = false;
    }
  });
});

关键修复点说明 #

• 正确保存初始高度：在DOMContentLoaded事件中获取Header的初始高度，确保页面刷新后（此时页面会回到顶部），拿到的是Header的真实原始高度。
• 状态标记isHeaderShrunk：避免滚动事件频繁触发时重复修改DOM样式，同时确保只有状态发生变化时才执行样式修改，解决了“只能恢复一次”的核心问题。
• 兼容的滚动距离获取：window.pageYOffset || document.documentElement.scrollTop适配了不同浏览器的滚动距离获取方式，避免出现判断失效的情况。
• 合理的触发阈值：用scrollDistance > 50作为收缩触发条件，避免页面轻微滚动就导致Header跳动，提升用户体验。

额外调试小技巧 #

• 打开浏览器控制台（F12），在滚动时打印scrollDistance、originalHeight和isHeaderShrunk的值，直观查看变量变化是否符合预期，快速定位逻辑错误。
• 检查Header的CSS是否添加了transition过渡效果，如果有的话，确保样式修改不会因为过渡动画导致状态判断延迟。

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