在滚动时，转到Y位置并等待CSS动画完成

Question

这是我的问题。首先，抱歉我的英语不好。

我在滚动（100％窗口高度）上调整了标题大小。当它调整大小并且 0.5s长时我会有动画。问题是当我不止一次滚动时，动画还没有结束，我不得不回去。

我需要滚动，转到Y位置，然后等待动画完成（禁用滚动），这样我才能看到我的内容从开始。当动画完成时再次启用滚动。

这是我的基本脚本

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

以下是我的示例链接： http://codepen.io/anon/pen/dXPVJL