滚动时固定导航菜单无法变透明？求正确实现代码示例

原代码的问题 #

• CSS选择器错误：.menu .transparent表示选中.menu的子元素中带有.transparent类的元素，而我们需要的是.menu自身添加.transparent类，正确写法是.menu.transparent（无空格）
• JavaScript拼写错误：添加类名时写成了tranparent（少了字母s），正确类名是transparent
• 原逻辑是生硬切换透明度，无法实现逐渐变透明的效果，需要改成根据滚动距离动态计算透明度

修正后的完整代码 #

HTML

<nav class="menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">文章</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>

<!-- 用于测试滚动的长内容 -->
<div class="content">
  <p>滚动页面查看导航栏效果...</p>
  <p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p>
  <p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p>
  <p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p>
</div>

CSS

.menu {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(45deg, #f00, #00f);
  padding: 10px 0;
  transition: background 0.3s ease; /* 添加过渡动画实现平滑渐变 */
}

.menu ul {
  list-style: none;
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.menu a {
  color: white;
  text-decoration: none;
  font-size: 18px;
}

.content {
  padding: 0 20px;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const menu = document.querySelector('.menu');
  // 定义最大滚动距离（超过这个距离后透明度不再变化）
  const maxScrollDistance = 300;

  function updateMenuTransparency() {
    // 计算透明度占比：滚动距离/最大滚动距离，范围0到1
    const opacityRatio = Math.min(window.scrollY / maxScrollDistance, 1);
    // 将背景色的透明度从1逐渐降到0.2（可根据需求调整最终透明度）
    const adjustedOpacity = 1 - (opacityRatio * 0.8);
    menu.style.background = `linear-gradient(45deg, rgba(255, 0, 0, ${adjustedOpacity}), rgba(0, 0, 255, ${adjustedOpacity}))`;
  }

  window.addEventListener('scroll', updateMenuTransparency);
  // 初始化时执行一次，避免页面刷新后滚动位置不为0时样式异常
  updateMenuTransparency();
});

说明 #

• 通过window.scrollY计算滚动距离，动态调整背景渐变的透明度，实现滚动时逐渐变透明的效果
• 添加transition: background 0.3s ease让透明度变化更平滑
• 可以通过调整maxScrollDistance和adjustedOpacity的计算值，自定义渐变的速度和最终透明度

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