Drupal9 Olivero主题如何让滚动样式仅作用于移动端菜单

你现在的代码没有加视口尺寸判断，所以滚动阴影会在所有设备尺寸下生效。Olivero主题默认移动端、桌面端导航的分界断点是75rem（即1200px），和你审查元素找到的媒体查询规则完全一致，只要在逻辑里增加断点判断，仅在移动端尺寸下应用阴影即可。

方案1：修改原有JS代码 #

直接替换子主题里的script.js内容：

(function ($, Drupal, window, document) {
  $(document).ready(function () {
    // 和Olivero主题CSS断点保持一致：75rem = 1200px
    const MOBILE_NAV_MAX_WIDTH = 75 * 16;
    const headerInner = document.getElementById("site-header__inner");
    if (!headerInner) return;

    window.addEventListener("scroll", function() {
      // 视口宽度达到桌面端断点时，直接清除阴影、终止逻辑
      if (window.innerWidth >= MOBILE_NAV_MAX_WIDTH) {
        headerInner.style.boxShadow = "none";
        return;
      }

      if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
        headerInner.style.boxShadow = "-36px 1px 36px rgb(0 0 0 / 8%)";
      } else {
        headerInner.style.boxShadow = "none";
      }
    });

    // 监听窗口尺寸变化，避免拖动窗口、切换横竖屏时样式残留
    window.addEventListener("resize", function() {
      if (window.innerWidth >= MOBILE_NAV_MAX_WIDTH) {
        headerInner.style.boxShadow = "none";
      }
    })
  });
})(jQuery, Drupal, this, this.document);

方案2：纯CSS实现（更推荐） #

这个效果完全不需要JS实现，直接在子主题样式文件里加下面的代码即可，性能更好，也不会出现JS和主题断点不同步的问题：

/* 仅移动端尺寸下，给滚动后固定的头部加阴影 */
@media (max-width: 74.99rem) {
  .site-header__fixable.is-fixed #site-header__inner {
    box-shadow: -36px 1px 36px rgb(0 0 0 / 8%);
  }
}

断点用74.99rem是为了和主题min-width: 75rem的桌面端规则完全错开，避免宽度在临界点时出现样式冲突。如果你之前在子主题里修改过Olivero的导航断点，把两个方案里的断点值同步改成自定义的数值就行。

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