页面滚动回顶部时else语句未正确恢复header内img宽高问题求助

核心诱因（概率最高） #

你在else分支中比if分支多了一行对header-homepage元素的样式设置代码：

document.getElementById("header-homepage").style.paddingBottom = "1em";

如果当前页面不存在id为header-homepage的元素，这行代码会直接抛出类型错误，中断后续所有代码执行，导致后面的img宽高赋值逻辑根本不会运行，这是最常见的报错原因。

修复方法 #

方法1：给元素操作加存在性判断 #

将上面的代码替换为以下内容，确保元素不存在时不会报错阻断后续逻辑：

const headerHomepage = document.getElementById("header-homepage");
if (headerHomepage) {
  headerHomepage.style.paddingBottom = "1em";
}

方法2：修正元素引用 #

如果确实需要操作该元素，检查id拼写是否正确，确保页面上存在对应id的元素。

其他补充排查点 #

• 检查CSS样式表中是否给#header-logo-img-illustration或者其父元素设置了带!important标记的宽高规则，带!important的CSS规则优先级高于行内样式，会导致js设置的宽高失效。
• 打开浏览器开发者工具的控制台面板，滚动页面查看是否有报错信息，可以直接定位问题。

优化方案（可选） #

不建议在js中直接写大量行内样式设置，更推荐用class切换的方式实现滚动样式变更，逻辑更清晰可维护：

1. 新增CSS样式：

/* 默认样式正常写即可，无需额外修改 */
/* 滚动后的样式 */
body.header-scrolled #header-wrapper {
  max-width: 100%;
}
body.header-scrolled #header {
  padding-top: 10px;
  padding-bottom: 0.4em;
}
body.header-scrolled #closebtn {
  margin: -43px 0 0 0;
}
body.header-scrolled #header-logo-img-illustration {
  width: 30px;
  height: 30px;
}

2. 简化js逻辑：

$(document).ready(function () {
  window.onscroll = dynamicHeaderOnScroll;

  function dynamicHeaderOnScroll() {
    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.classList.toggle('header-scrolled', scrollTop > 50);
  }
});

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