我的页眉在滚动上调整大小不起作用

Question

我已经在其他站点上完成了此操作，但似乎无法在此站点上正常运行。 当您向下滚动页面时，它应该缩小一点，并且标题背景颜色应该变成白色。谁能告诉我为什么它不起作用？

这是我的JavaScript

<script>
function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 150,
            header = document.querySelector("header");
        if (distanceY > shrinkOn) {
            classie.add(header,"smaller");
        } else {
            if (classie.has(header,"smaller")) {
                classie.remove(header,"smaller");
            }
        }
    });
}
window.onload = init();

这是我的CSS-

.page-id-10标头{

background: transparent;
position: fixed;
text-align: left;
width: 100%;
z-index: 100;
overflow: hidden;
transition: all 0s ease 0s, all 0.25s ease 0s;
height: auto;

}

标题{

background-color: rgba(0, 0, 0, 0.4);
position: fixed;
text-align: left;
width: 100%;
z-index: 100;
overflow: hidden;
transition: all 0s ease 0s, all 0.25s ease 0s;
height: auto;

}

header.smaller {

height: auto;
background-color: rgba(255, 255, 255, 0.4);

}

header.smaller .logo img {

    max-width: 250px;

}

顶部标头部分{

width: 100%; 
padding: 0 10px 0 22px;
margin: 0 auto;

}

header.smaller #access {

background-color: none;

}

header.smaller＃访问一个{

line-height: 10px;

}

网址为http://pt6-dev.info/

谢谢！