多页面滚动隐藏Header仅首页生效，如何实现全页面生效？

可能的原因及修复方案 #

1. 滚动事件被其他脚本覆盖 #

直接赋值window.onscroll会覆盖之前的绑定逻辑，如果其他页面也有对window.onscroll的赋值操作，就会导致你的滚动函数失效。改用jQuery的事件绑定方式，允许多个脚本同时监听滚动事件：

function scrollFunction(){
  var myHeader = $("header");
  if (document.documentElement.scrollTop > 700 ){
    myHeader.slideUp(400);
  } else {
    myHeader.slideDown(800);
  }
}

// 用on方法绑定滚动事件，避免被覆盖
$(window).on('scroll', scrollFunction);

2. DOM未加载完成就执行脚本 #

如果你的JS代码在<header>元素之前加载，$("header")会找不到目标DOM元素，导致函数执行无效果。将代码包裹在$(document).ready()中，确保DOM完全加载后再执行：

$(document).ready(function() {
  function scrollFunction(){
    var myHeader = $("header");
    if (document.documentElement.scrollTop > 700 ){
      myHeader.slideUp(400);
    } else {
      myHeader.slideDown(800);
    }
  }

  $(window).on('scroll', scrollFunction);
});

3. 非window容器的滚动问题（可选排查） #

如果某些页面的内容是在自定义滚动容器（比如设置了overflow: auto的<div>）内滚动，window的scroll事件不会触发。此时需要找到对应的滚动容器，绑定scroll事件：

// 替换为你的滚动容器选择器，比如#content-container
$("#content-container").on('scroll', function() {
  var myHeader = $("header");
  // 这里用容器的scrollTop而非document的
  if ($(this).scrollTop() > 700 ){
    myHeader.slideUp(400);
  } else {
    myHeader.slideDown(800);
  }
});

额外优化建议 #

给滚动函数添加防抖处理，避免频繁触发导致页面性能问题：

function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  }
}

$(window).on('scroll', debounce(scrollFunction, 100));

内容的提问来源于stack exchange，提问作者Alvin Dogba Jr