添加无关媒体查询后Header的JavaScript Sticky类切换功能失效问题求助

兄弟，我一眼就揪出问题根源了——你写的CSS里嵌套了媒体查询，这在标准CSS里是不被允许的！浏览器没法正确解析这种嵌套结构，会导致整个CSS块出现解析错误，间接影响页面样式渲染，甚至让你误以为JS的toggle功能失效了。

问题分析 #

你原本的CSS里，把max-width:500px的媒体查询嵌套在了max-width:1275px的媒体查询内部：

@media all and (max-width: 1275px) {
  .portfolio-images {
    grid-template-columns: 1fr 1fr;
  }
  .portfolio-images img {
    width: 40vw;
    height: auto;
  }
  /* 这里嵌套媒体查询是错误写法！ */
  @media all and (max-width: 500px) {
    .portfolio-images {
      grid-template-columns: 1fr;
    }
    .portfolio-images img {
      width: 90vw;
      height: auto;
    }
  }
}

这种写法不符合CSS规范，浏览器会忽略嵌套的媒体查询块，甚至可能干扰前面的样式解析，导致.page-header.sticky样式无法正常生效，让你误以为JS没起作用。

修复步骤 #

1. 拆分嵌套的媒体查询 #

把两个媒体查询改成同级的独立规则，这是CSS允许的正确写法：

/* 中等屏幕适配 */
@media all and (max-width: 1275px) {
  .portfolio-images {
    grid-template-columns: 1fr 1fr;
  }
  .portfolio-images img {
    width: 40vw;
    height: auto;
  }
}

/* 小屏幕适配 */
@media all and (max-width: 500px) {
  .portfolio-images {
    grid-template-columns: 1fr;
  }
  .portfolio-images img {
    width: 90vw;
    height: auto;
  }
}

2. 验证JS功能是否正常 #

其实你的JS逻辑本身没问题，只是CSS错误误导了你。可以打开浏览器控制台（按F12），切换到Elements标签，滚动页面时观察.page-header的class列表，看看sticky类是否会随滚动添加/移除。

3. 优化JS性能（可选） #

把header元素的DOM查询移到scroll事件外面，避免每次滚动都重复查询DOM，提升一点性能：

// 只查询一次DOM元素
const header = document.querySelector('.page-header');
window.addEventListener('scroll', () => {
  header.classList.toggle('sticky', window.scrollY > 30);
});

做完这些修改后，Header滚动切换类的功能应该就能正常工作，同时媒体查询的样式也能正确生效了。

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