滚动时隐藏头部，底部上滑时显示头部的实现方案咨询

我明白你的需求了——你想要让头部在大部分滚动场景下保持隐藏，只有当用户滚动到页面底部，之后再向上滚动时才让头部显示出来。咱们来修改你的代码，同时优化一些细节：

首先，先修复原代码里的小问题：变量名currentScrollpos和currentScrollPos大小写不一致，这会导致报错；另外每次滚动都重新获取header元素有点浪费性能，咱们提前缓存它。

修改后的完整代码：

// 提前缓存头部元素，避免每次滚动重复获取DOM
const header = document.getElementById('app-program-header');
let prevScrollpos = window.pageYOffset;
// 标记用户是否已经滚动到过页面底部
let hasReachedBottom = false;

window.onscroll = function() {
  const currentScrollPos = window.pageYOffset;
  // 判断当前是否滚动到页面底部（减去10px兼容浏览器滚动边界差异）
  const isAtBottom = window.innerHeight + currentScrollPos >= document.documentElement.scrollHeight - 10;

  // 更新"到达过底部"的状态，一旦触发就保持为true
  if (isAtBottom) {
    hasReachedBottom = true;
  }

  // 核心逻辑：仅当到达过底部且当前是向上滚动时，才显示头部；其余情况隐藏
  if (hasReachedBottom && prevScrollpos > currentScrollPos) {
    header.style.top = '0';
  } else {
    header.style.top = '-50px';
  }

  // 更新上一次的滚动位置，用于下一次判断
  prevScrollpos = currentScrollPos;
};

关键逻辑拆解： #

• 缓存DOM元素：把getElementById放在滚动事件外部，减少重复的DOM查询操作，提升页面性能。
• 底部判断逻辑：用window.innerHeight + currentScrollPos >= document.documentElement.scrollHeight - 10来检测是否到达底部，减去10px是为了避免因浏览器渲染差异导致的判断延迟。
• 状态标记：hasReachedBottom变量记录用户是否已经触底，一旦触底后这个状态就会保留，确保后续上滑时能触发头部显示。
• 显示条件：只有同时满足「已经触底」和「当前正在向上滚动」两个条件时，头部才会显示；其他所有滚动场景（包括未触底时的上滑、任何方向的滚动）都保持头部隐藏。

可选优化：重置触底状态 #

如果你希望用户滚动回页面顶部后，需要再次触底才会触发头部显示，可以在代码中添加以下逻辑：

// 当滚动到页面顶部时，重置触底标记
if (currentScrollPos === 0) {
  hasReachedBottom = false;
}

这样调整后，就能完美实现你想要的滚动交互效果啦！

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