Фиксированная шапка при прокрутке страницы

fixed_header

Taken from http://webcoder.kz/fiksirovannaya-shapka-pri-prokrutke-stranicy

HTML разметка:

<header></header>
<div class="content">
<p>
Сюда вставляете очень много контента, для того чтобы появился вертикальный скролл...
</p>
</div>


CSS стили:

header {
    position: relative;
    width: 100%;
    height: 60px;
    background: red;
}

header.clone {
    position: fixed;
    top: -60px;
    transition: 0.2s top ease-in;
}

body.down header.clone {
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}


Волшебный JS код:

(function($) {
    $(document).ready(function() {
        var $header = $("header"),
            $clone = $header.before($header.clone().addClass("clone"));
       
        $(window).on("scroll", function() {
            var fromTop = $(document).scrollTop();
            $("body").toggleClass("down", (fromTop > 200));
        });
    });
})(jQuery);