Javascript code to fix the header in the top.

fix-header-script.js

jQuery(function($){

        var header           = document.querySelector('header.page-header .header.content'),
            panel            = document.querySelector('header.page-header .panel'),
            $panel           = jQuery(panel),
            $header          = jQuery(header),
            headerContainer  = document.querySelector('header.page-header'),
            $headerContainer = jQuery(headerContainer),
            lastScroll       = 0,
            upSign           = -1,
            downSign         = -1;

        $headerContainer.css('position', 'fixed');

        // Fixed Header space
        $headerContainer.after('<div class="fixed-header-space" style="height: '+$headerContainer.outerHeight()+'px; display: block;width: 100%"></div>');

        $( window ).resize(function() {
            jQuery('.fixed-header-space').height($headerContainer.outerHeight());
        });

        $(window).scroll(function(event){

            //Sets the current scroll position
            var st = $(this).scrollTop();

            //Determines up-or-down scrolling
            if (st > lastScroll){

                if(downSign || downSign == -1) {

                    $headerContainer.animate(
                        {top:-$panel.outerHeight()},
                        300,
                        function () { });

                    upSign    = 1;
                    downSign  = 0;
                }
            }
            else {

                if(upSign || upSign == -1) {

                    $headerContainer.animate(
                        {top:0},
                        300,
                        function () { });

                    upSign = 0;
                    downSign = 1;
                }
            }

            //Updates scroll position
            lastScroll = st;
        });

    });