页面向下滚动时如何实现导航栏底部阴影显示效果

完全可以仅用CSS实现这个交互，不需要编写任何JavaScript代码，性能比JS监听滚动事件更好。

你现有代码的问题是阴影样式只写在了宽度小于75rem的移动端断点下，桌面端默认没有对应阴影规则，而且没有和滚动状态做绑定。

推荐实现方案（现代浏览器，覆盖95%以上用户） #

直接使用CSS滚动驱动动画即可，不需要修改现有HTML结构，只要替换/追加CSS样式：

.site-header {
  z-index: 111;
  position: sticky;
  top: 0;
}

.site-header__fixable .site-header__inner {
  /* 默认透明阴影，避免显示时太突兀 */
  box-shadow: 0 0 0 rgb(0 0 0 / 0%);
  transition: box-shadow 0.2s ease;
  /* 绑定动画到页面根滚动条 */
  animation: show-header-shadow linear forwards;
  animation-timeline: scroll(root);
  /* 滚动距离超过1px就完全显示阴影，符合"开始滚动立即显示"的要求 */
  animation-range: 0 1px;
}

@keyframes show-header-shadow {
  to {
    box-shadow: -36px 1px 36px rgb(0 0 0 / 8%);
  }
}

/* 如果需要全端统一触发滚动阴影效果，可以删掉下面这段媒体查询里单独的阴影规则，避免覆盖上面的动画效果
@media (max-width: 75rem) {
  .site-header__fixable .site-header__inner {
    box-shadow: -36px 1px 36px rgb(0 0 0 / 8%);
  }
}
*/

• 如果需要调整阴影触发的滚动距离，只要修改animation-range里的第二个数值即可，比如改成100px就是滚动100px后阴影完全显示。
• 这个方案由浏览器原生处理滚动状态监听，不会占用JS主线程，不会出现滚动卡顿的问题。

旧浏览器兼容方案 #

如果需要兼容Safari 15以下等不支持滚动驱动动画的版本，可以用sticky定位哨兵的纯CSS方案：

1. 先在header标签内部最开头加一个哨兵元素：

<div class="header-scroll-sentinel"></div>

2. 追加对应CSS：

.header-scroll-sentinel {
  position: sticky;
  top: -1px;
  height: 1px;
  visibility: hidden;
  pointer-events: none;
}
.site-header__fixable .site-header__inner {
  box-shadow: 0 0 0 rgb(0 0 0 / 0%);
  transition: box-shadow 0.2s ease;
}
/* 哨兵元素离开视口顶部时（即页面发生滚动）显示阴影 */
.site-header:has(.header-scroll-sentinel:not(:-webkit-sticky)) .site-header__inner,
.site-header:has(.header-scroll-sentinel:not(:sticky)) .site-header__inner {
  box-shadow: -36px 1px 36px rgb(0 0 0 / 8%);
}

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