如何根据浏览器宽度调整JS的.style.top等值 实现类似CSS媒体查询效果

完全可以实现类似CSS媒体查询的响应式判断逻辑，常用两种实现方式如下：

方案1：使用window.matchMediaAPI（推荐） #

这个API和CSS媒体查询语法完全一致，规则维护和CSS侧可以保持统一，适配更准确。
优化后的完整代码如下：

// 提前缓存DOM元素，避免每次滚动重复查询
const header = document.getElementById("show-hide-header");
// 定义移动端断点，和CSS媒体查询保持一致即可，示例用768px
const isMobile = window.matchMedia("(max-width: 767px)");
let prevScrollpos = window.pageYOffset;

// 滚动逻辑封装成函数，方便复用
function handleScroll() {
  const currentScrollPos = window.pageYOffset;
  // 根据当前设备类型获取对应的隐藏高度，移动端头部高度可按需修改数值
  const hideTop = isMobile.matches ? "-80px" : "-62px"; 
  
  if (prevScrollpos > currentScrollPos) {
    header.style.top = "0";
  } else {
    header.style.top = hideTop;
  }
  prevScrollpos = currentScrollPos;
}

// 绑定滚动事件
window.onscroll = handleScroll;
// 可选：绑定窗口大小变化事件，避免用户手动拖拽窗口宽度时规则不生效
window.onresize = handleScroll;

优化提示：可以把transition: all 0.3s ease;直接写在CSS的#show-hide-header选择器里，不需要在JS中重复赋值，减少冗余代码。

方案2：直接判断视口宽度（适合简单场景） #

如果不需要和CSS媒体查询严格对齐，也可以直接读取视口宽度做判断：

const header = document.getElementById("show-hide-header");
let prevScrollpos = window.pageYOffset;

window.onscroll = function() {
  const currentScrollPos = window.pageYOffset;
  const screenWidth = window.innerWidth;
  const hideTop = screenWidth < 768 ? "-80px" : "-62px";
  
  if (prevScrollpos > currentScrollPos) {
    header.style.top = "0";
  } else {
    header.style.top = hideTop;
  }
  prevScrollpos = currentScrollPos;
}

注意事项 #

• 断点数值可以根据自己站点的实际适配阈值调整，比如常见的移动端断点还有375px、992px等
• 如果有多个断点需要适配，只需要扩展判断逻辑，给不同宽度区间设置对应的hideTop数值即可

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