如何实现页面向下滚动时才显示元素阴影？

要实现「初始无阴影，向下滚动页面显示指定阴影，回到顶部阴影消失」的效果，核心思路是通过监听页面滚动事件，动态给目标元素添加/移除带阴影的CSS类，具体实现步骤如下：

1. HTML结构 #

先定义底部带线条的目标元素（以导航栏为例）：

<div class="navbar">
  <!-- 这里放元素内容，比如导航菜单、logo等 -->
</div>

2. CSS样式 #

设置元素的初始样式（包含底部线条、默认无阴影），并单独定义带阴影的类，同时添加过渡动画让效果更平滑：

.navbar {
  position: fixed; /* 固定在顶部，保证滚动时元素位置不变 */
  top: 0;
  width: 100%;
  padding: 1rem;
  border-bottom: 1px solid #e5e5e5; /* 底部线条 */
  background-color: #ffffff;
  transition: box-shadow 0.3s ease-in-out; /* 阴影过渡动画 */
}

/* 滚动后要添加的阴影类 */
.navbar.has-shadow {
  box-shadow: 0 5px 5px -5px #999;
}

3. JavaScript逻辑 #

监听页面滚动事件，根据滚动距离判断是否给元素添加阴影类：

const navbar = document.querySelector('.navbar');

window.addEventListener('scroll', () => {
  // 当滚动距离超过10px时显示阴影，可根据需求调整阈值
  if (window.scrollY > 10) {
    navbar.classList.add('has-shadow');
  } else {
    navbar.classList.remove('has-shadow');
  }
});

补充说明 #

• 使用position: fixed是这类场景的常规操作，确保元素始终在视口顶部，阴影效果的触发逻辑更直观；如果元素不是固定定位，可通过getBoundingClientRect()获取元素位置来判断滚动状态
• 过渡动画（transition）能让阴影的显示/隐藏过程更自然，避免生硬切换
• 滚动阈值设为10px是为了过滤顶部微小的滚动波动，比如浏览器的滚动回弹效果，你可以根据实际需求调整这个数值

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