iOS端滚动至页面顶部后导航菜单隐藏问题求助

我之前也碰到过iOS Safari这个弹性滚动导致的坑，问题出在Safari的「橡皮筋滚动」特性上：当你把页面拉到顶部后继续下拉，window.pageYOffset会变成负数；当你松开手页面回弹回顶部时，currentScrollPos会从负数回到0，这时候prevScrollpos（之前的负数）就会小于currentScrollPos（0），触发了隐藏菜单的逻辑，导致菜单在顶部意外消失。

修改后的JavaScript代码 #

let prevScrollpos = window.pageYOffset;
// 防抖函数：减少scroll事件触发频率，优化性能并避免状态抖动
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

window.onscroll = debounce(function() {
  const currentScrollPos = window.pageYOffset;
  const header = document.getElementById("main-header");
  
  // 核心修复：当滚动到页面顶部时，强制显示导航菜单
  if (currentScrollPos === 0) {
    header.style.top = "0";
  } 
  // 向上滚动（且不在顶部）时显示菜单
  else if (prevScrollpos > currentScrollPos) {
    header.style.top = "0";
  } 
  // 向下滚动时隐藏菜单
  else {
    header.style.top = "-90px";
  }
  
  prevScrollpos = currentScrollPos;
}, 10);

关键优化点说明 #

• 顶部强制显示逻辑：新增currentScrollPos === 0的判断，不管之前的滚动状态，只要回到页面顶部就强制显示菜单，直接规避了iOS弹性滚动导致的负数偏移问题
• 防抖处理：scroll事件在滚动时会高频触发，防抖函数可以减少不必要的DOM操作，提升页面性能，同时避免iOS滚动过程中菜单频繁切换显示/隐藏的抖动问题
• 变量规范：用let/const替代var，符合现代JavaScript语法规范

额外注意事项 #

看你的HTML代码，存在两个完全相同的<header id="main-header">元素，HTML中ID必须唯一，这会导致JavaScript只会选中第一个header，可能引发其他异常问题，建议删除重复的那个header节点。

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