Create an animated sticky header with css3 and javascript.

sticky-header.html

    <script>
        /**
         * Add Class to header area to make it sticky.
         * Placed into header or footer area.
         */
        function init() {
            window.addEventListener('scroll', function(e){
                var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                        shrinkOn = 300,
                        header = document.getElementById("headerID"); //Header ID
                if (distanceY > shrinkOn) {
                    header.classList.add("sticky");
                } else {
                    if (header.classList.contains("sticky")) {
                        header.classList.remove("sticky");
                    }
                }
            });
        }
        window.onload = init();
    </script>
    <style>
        /*
        * Add styling to class
        */
        header {
            transition: all 0.4s ease;
        }
        .sticky {
            position: fixed !important;
            background-color: #000;
        }
    </style>