求助：如何实现滚动时导航栏背景色平滑过渡效果

首先，你的代码里有个拼写错误：document.getElementsById 应该改为 document.getElementById（单数形式），先修正这个问题。

要实现平滑过渡，核心是让CSS处理过渡动画，而非直接通过JS修改样式，具体步骤如下：

1. 添加CSS过渡样式 #

给导航栏元素加上transition属性，指定背景色的过渡效果：

#bg-custom {
  /* 0.3s为过渡时长，ease为过渡曲线，可根据需求调整数值 */
  transition: background-color 0.3s ease;
}

2. 修改JS逻辑，用类切换替代直接改样式 #

先通过CSS定义两种状态的背景色：

/* 默认未滚动状态的背景色 */
#bg-custom {
  background-color: #ede9e0;
}
/* 滚动后的背景色 */
#bg-custom.scrolled {
  background-color: #ede9e000;
}

再调整JS代码，通过添加/移除类来切换状态：

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  const nav = document.getElementById("bg-custom");
  if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
    nav.classList.add("scrolled");
  } else {
    nav.classList.remove("scrolled");
  }
}

原理说明 #

直接通过JS修改style.backgroundColor时，若未预先在CSS中定义transition规则，浏览器不会触发过渡动画。用类切换的方式，既能让样式逻辑与JS逻辑分离，又能确保CSS的过渡规则生效，从而实现平滑的颜色变化效果。

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