Javascript 粘性标头转换不平滑

我已经创建了一个粘性标题。在其中，我也在调整徽标图像的大小。 这很好用。我只想在徽标图像尺寸越来越大的情况下保持平滑

我能在这方面得到任何帮助吗

函数init（）{
window.addEventListener（'scroll'，函数（e）{
var distance=window.pageYOffset | | document.documentElement.scrollTop，
shrinkOn=300，
header=document.querySelector（“.header-top”）；
如果（距离>收缩）{
类别添加（标题，“较小”）；
}否则{
如果（类别有（标题，“较小”））{
类别移除（标题“较小”）；
}
}
});
}
window.onload=init（）；
俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰{
宽度：100%；
高度：150像素；
溢出：隐藏；
位置：固定；
排名：0；
左：0；
z指数：999；
背景色：#0683c9；
-webkit过渡：高度0.3s；
-moz过渡：高度0.3s；
-ms转换：高度0.3s；
-o型过渡：高度0.3s；
过渡段：高度0.3s；
}
分区标题顶部img#标志{
显示：内联块；
高度：150像素；
/*线高：150px*/
浮动：左；
/*字体系列：“奥斯瓦尔德”，无衬线；
字体大小：60px；
颜色：白色*/
/*字体大小：400*/
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
-ms转换：均为0.3s；
-o-过渡：均为0.3s；
过渡：均为0.3秒；
}
俯仰俯仰导航{
显示：内联块；
浮动：对；
}
舱首顶部导航a{
线高：150px；
左边距：20px；
颜色：#9fdbfc；
字号：700；
字号：18px；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
-ms转换：均为0.3s；
-o-过渡：均为0.3s；
过渡：均为0.3秒；
}
标题导航a：悬停{
颜色：白色；
}
分区收割台-顶部-更小{
高度：100px；
}
div.header-top.smer img#徽标{
字体大小：30px；
高度：自动；
线高：75px；
宽度：125px；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
-ms转换：均为0.3s；
-o-过渡：均为0.3s；
过渡：均为0.3秒；
}
俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰俯仰{
线高：75px；
}

给你的图片加一个宽度，给你的小图片加一个高度

 div.header-top.smaller img#logo {
  font-size: 30px;
  height: 100px;
 line-height: 75px;
 width: 125px;
-webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
 transition: all 0.3s; }

给你的图片加一个宽度，给你的小图片加一个高度

 div.header-top.smaller img#logo {
  font-size: 30px;
  height: 100px;
 line-height: 75px;
 width: 125px;
-webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
 transition: all 0.3s; }

---

谢谢XYZ，您能让我了解如何修复此问题吗？我无法理解固定高度：150px；这是您为较大图像和较小img高度提供的样式：auto；宽度：125px。因此，请指定较大图像的宽度，然后它将显示过渡变换只能在数值上进行动画，因此您必须给出结束和开始过渡测量值。因此“宽度自动”或“高度自动”不起作用。谢谢XYZ，您能让我了解如何修复此问题吗？我无法理解固定高度：150px；这是您为较大图像和较小img高度提供的样式：auto；宽度：125px。因此，请指定较大图像的宽度，然后它将显示过渡变换只能在数值范围内设置动画，因此您必须提供结束和开始过渡测量值。因此，“宽度自动”或“高度自动”不起作用。

 div.header-top.smaller img#logo {
  font-size: 30px;
  height: 100px;
 line-height: 75px;
 width: 125px;
-webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
 transition: all 0.3s; }