Before scroll:

After scroll:

To obtain of sticky header effect you can use next code snippet.

1. Add CSS styles:

.persist_header_container {
}

.persist_header {
    padding: 10px;
    background: yellow;
    z-index: 1;
}

.floating_header {
    position: fixed;
    top: 0;
    visibility: hidden;
    -webkit-box-shadow: 0px 2px 12px 0px rgba(50, 50, 50, 1);
    -moz-box-shadow: 0px 2px 12px 0px rgba(50, 50, 50, 1);
    box-shadow: 0px 2px 12px 0px rgba(50, 50, 50, 1);
}

2. Add JS code:

$(function() {
    $(".persist_header_container").each(function () {
        var header = $(".persist_header", this);
        header.before(header.clone())
              .css("width", header.width())
              .addClass("floating_header");
    });

    window.updateHeader = function () {
        $(".persist_header_container").each(function () {
            $(".floating_header", this)
                .css({"visibility": ($(window).scrollTop() > $(this).offset().top ? "visible" : "hidden")});
        });
    };

    $(window).scroll(function () {
        updateHeader();
    });
    updateHeader();
});

Download source code: sticky_header

Also,
http://www.cssreset.com/creating-fixed-headers-with-css/
http://css-tricks.com/persistent-headers/