滚动时header高度切换的CSS transition过渡效果不生效如何解决

问题根因 #

1. 你当前#header的transition没有明确指定过渡属性，且缺少overflow: hidden配置，内部元素可能会撑开header实际高度，导致高度过渡效果看不到
2. logo直接用display: none/block切换，display属性不支持CSS过渡，会出现生硬跳转

修复后的代码 #

CSS部分

#header {
  position: fixed;
  width: 100%;
  height: 100px;
  transition: height 0.3s ease; /* 明确指定过渡height属性，加缓动效果更自然 */
  overflow: hidden; /* 核心配置，避免内部内容超出当前header高度，打断过渡效果 */
}

/* 新增logo平滑切换的样式 */
#classic-logo, #minifyed-logo {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* 隐藏状态不用display:none，改用支持过渡的属性组合 */
#classic-logo.hidden, #minifyed-logo.hidden {
  opacity: 0;
  visibility: hidden;
  position: absolute; /* 避免隐藏的logo占用布局空间 */
}

JS部分

// 先监听DOM加载完成再执行逻辑，避免元素未加载拿到null
document.addEventListener('DOMContentLoaded', function() {
  const header = document.getElementById("header");
  const classicLogo = document.getElementById('classic-logo');
  const minifyedLogo = document.getElementById('minifyed-logo');

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

  function scrollFunction() {
    const isScrolled = document.body.scrollTop > 550 || document.documentElement.scrollTop > 550;
    if (isScrolled) {
      header.style.height = "70px";
      classicLogo.classList.add('hidden');
      minifyedLogo.classList.remove('hidden');
    } else {
      header.style.height = "100px";
      minifyedLogo.classList.add('hidden');
      classicLogo.classList.remove('hidden');
    }
  }
})

异常排查项 #

如果修改后过渡仍不生效，按以下顺序排查：

• 检查是否有其他CSS规则用!important强制覆盖了#header的height属性，优先级高于JS设置的行内样式
• 检查header内部子元素是否设置了固定min-height、上下外边距，撑住了header的实际高度
• 打开浏览器开发者工具的元素面板，滚动页面时观察#header的height属性是否正常切换，确认JS逻辑执行正常

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