Help with Jquery code to Hide/Show Header on Scrolling

[moy2010]

Hi, community . I'm trying to Hide or Show the Header DIV depending on wether the user has scrolled down (Hide Header) or up (Show header).

I'm basically trying to achieve this result: http://codepen.io/AdobeWordPress/pen/tigrx

So far, the closest I've been able to get to it is with the following code:

var scroll_pos = 0;
var scroll_time;

$(window).scroll(function() {
    clearTimeout(scroll_time);
    var current_scroll = $(window).scrollTop();

    if (current_scroll >= 0) {
        if (current_scroll <= scroll_pos) {
            $('.cs_mega_menu').slideDown('230');
        }
        else {
            $('.cs_mega_menu').slideUp('230');
        }
    }

    scroll_time = setTimeout(function() {
        scroll_pos = $(window).scrollTop();
    }, 100);
});

But, the problem is that the effect is inexact (Does not respond properly every time) and the animation is not fluid.

 

When I try to use the code from the codepen example, my website goes blank no matter what I do :/. If you could help me to transcribe it so that it's usable on my website, I would appreciate it a lot.