Javascript：粘性菜单滚动故障

你好，我有一个shopify网站，试图实现一个粘性标题，当有人从标题向下滚动时，它会改变图像的位置和位置。 为此，我添加了以下Javascript

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

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      document.getElementById("siteheader").classList.add("sticky_header");
    } else {
        document.getElementById("siteheader").classList.remove("sticky_header");
    }
}

我的目标是标识图像的id，并切换到粘性标题类

<img id="siteheader" class="header__logo-image">

上述设置工作正常，符合要求 但是，当滚动到底部时，图像大小在非粘性头和粘性头状态和

有突然变化的小故障，头大小没有变化

在.scrollTop>20时，这种情况发生得非常快

---

有人能帮我把这个过程弄平滑吗。

你在更改徽标的高度吗？您是否使用了任何动画/过渡？是的，高度正在更改，如css中所示，我尝试过css过渡，但仍然没有帮助。还尝试了jquery动画，而不是切换类。但这本身也有一些问题，比如动画有时有效，有时无效而不仅仅是

window.onscroll=scroll函数？我的意思是，它不会解决您的问题，但是没有必要将
scrollFunction
包装到匿名函数中。
.sticky_header {
    float: left;
    height: 45px;
    width: auto;
    margin-bottom: 0;
}