Javascript：粘滞菜单滚动故障

Question

您好我有一个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并且标记了 sticky_header 类

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

我添加了以下css，用于将徽标移动到左侧并更改其大小

.sticky_header {
    float: left;
    height: 45px;
    width: auto;
    margin-bottom: 0;
}

上述设置工作正常，符合要求 但是当滚动到底部时，图像大小在非 sticky_header 和 sticky_header 状态之间展开并且

出现突然变化的故障而不改变标题大小。

在.scrollTop＆gt;这一点上，这种情况发生得非常快。 20

可以帮助我顺利完成这个过程。