滚动时头部隐藏功能优化：实现向上滚动200px时的延迟显示效果

看起来你已经找对了方向，但逻辑上有几个小问题导致效果没达到预期。咱们一步步来修正：

问题分析 #

你的代码里有两个关键问题：

• curScrollBottom变量和curScroll完全重复，并没有实际计算滚动相关的差值
• 向上滚动的判断条件用了curScrollBottom > thresholdScrollUp，这是判断当前滚动位置是否超过200px，而不是向上滚动的距离是否达到200px——这和你想要的"向上滚动200px时延迟显示"逻辑不符

修正后的代码 #

// menu hide on scroll
(function(){
 var doc = document.documentElement;
 var w = window;
 var curScroll;
 var prevScroll = w.scrollY || doc.scrollTop;
 var curDirection = 0;
 var prevDirection = 0;
 var header = document.getElementById('site-header');
 var toggled;
 var threshold = 350; // 向下滚动超过此距离隐藏导航
 var thresholdScrollUp = 200; // 向上滚动超过此距离显示导航
 var scrollUpDistance = 0; // 新增：记录向上滚动的累计距离

 var checkScroll = function() {
 curScroll = w.scrollY || doc.scrollTop;
 
 // 计算向上滚动的距离
 if(curScroll < prevScroll) {
  scrollUpDistance += prevScroll - curScroll;
 } else {
  // 向下滚动时重置向上滚动距离
  scrollUpDistance = 0;
 }

 if(curScroll > prevScroll) {
  // 向下滚动
  curDirection = 2;
 } else {
  // 向上滚动
  curDirection = 1;
 }

 if(curDirection !== prevDirection) {
  toggled = toggleHeader();
 }

 prevScroll = curScroll;
 if(toggled) {
  prevDirection = curDirection;
 }
 };

 var toggleHeader = function() {
 toggled = true;
 if(curDirection === 2 && curScroll > threshold) {
  // 向下滚动超过阈值，隐藏导航
  header.classList.add('hide');
  jQuery('#site-header-sticky-wrapper').addClass('hide');
  // 隐藏时重置向上滚动距离
  scrollUpDistance = 0;
 } else if (curDirection === 1 && scrollUpDistance >= thresholdScrollUp) {
  // 向上滚动累计距离超过阈值，显示导航
  jQuery('#site-header-sticky-wrapper').removeClass('hide');
  header.classList.remove('hide');
  // 显示后重置向上滚动距离，避免重复触发
  scrollUpDistance = 0;
 } else {
  toggled = false;
 }
 return toggled;
 };

 window.addEventListener('scroll', checkScroll);
})();

关键修改点说明 #

• 新增scrollUpDistance变量：用来累计向上滚动的总距离，每次向下滚动时重置这个值
• 修正向上滚动的判断逻辑：不再判断当前滚动位置，而是判断累计向上滚动的距离是否达到200px
• 隐藏/显示导航后重置scrollUpDistance：避免重复触发状态切换，确保每次向上滚动都需要凑够200px才会显示
• 优化状态切换的触发时机：确保只有当滚动方向变化且满足阈值条件时，才会切换导航的显示状态

这样修改后，就能实现你想要的效果：向下滚动超过350px时隐藏导航，向上滚动累计达到200px时延迟显示导航。

内容的提问来源于stack exchange，提问作者z-1881