Javascript:粘滞菜单滚动故障

时间:2017-02-15 13:38:48

标签: javascript html css shopify

您好我有一个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

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

0 个答案:

没有答案
豫ICP备18024241号-1