On scroll, go to Y position and wait CSS animation to finish

Question

Here is my problem. First, sorry for my bad english.

I have resizing header on scroll (100% windows height). And I have animation when it resizes and it's 0.5s long. The problem is when I scroll more than once, animation doesn't finish and I have to go back.

I need on scroll, to go on Y position, and wait animation to finish (disable scrolling) so i could see my content from beggining. And when animation finished than enable scrolling again.

Here is my base script

<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>

Here is my example link: http://codepen.io/anon/pen/dXPVJL