滚动至页面顶部时移除position fixed类，能否仅修改JavaScript实现？

可以完全通过修改JavaScript代码实现需求，核心是在滚动到页面顶部（或滚动距离小于阈值）时，移除所有带有position: fixed属性的类。

修改后的完整JavaScript代码 #

(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 = 100;

  var checkScroll = function() {
      curScroll = w.scrollY || doc.scrollTop;
      if(curScroll > prevScroll) {
          // 向下滚动
          curDirection = 2;
      }
      else {
          // 向上滚动
          curDirection = 1;
      }

      toggled = toggleHeader(); // 每次滚动都执行状态检查，确保顶部状态被及时处理
      prevScroll = curScroll;
      if(toggled) {
          prevDirection = curDirection;
      }
  };

  var toggleHeader = function() { 
      toggled = true;
       if (curDirection === 2 && curScroll > threshold) {
        header.classList.add("nav-on-scroll");
        header.classList.remove("show-nav-on-scroll");
      } else if (curDirection === 1 && curScroll > threshold) {
        header.classList.add("show-nav-on-scroll");
      } else {
          // 滚动到顶部或距离顶部不足阈值时，移除所有固定定位相关类
          header.classList.remove("nav-on-scroll");
          header.classList.remove("show-nav-on-scroll");
          toggled = false;
      }
      return toggled
  };

  window.addEventListener('scroll', checkScroll);

})();

关键改动说明 #

1. 强制触发状态检查：原代码仅在滚动方向变化时执行头部状态切换，修改后每次滚动都会调用toggleHeader，确保页面顶部的状态能被及时检测并处理。
2. 新增顶部状态处理逻辑：在else分支中，当滚动距离小于等于阈值时，直接移除nav-on-scroll和show-nav-on-scroll这两个包含固定定位的类，让头部恢复默认布局，不再遮挡页面顶部的div。

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