fly header

flyHeader.js

$.fn.flyHead = function () {
    function t() {
        let t;
        'absolute' == i.css('position') ? t = -a.height : (t = parseInt(i.css('top')) - n.step, t = -t > a.height ? -a.height : t), i.css({
            top: t,
            position: 'fixed'
        })
    }

    function o() {
        let t = parseInt(i.css('top')) - n.step;
        t = t > 0 ? 0 : t, i.css({top: t}), e()
    }

    function e() {
        i.css({backgroundPosition: '0 -' + n.val + 'px'})
    }

    let i = this, a = {height: 0, top: 0}, n = {last: 0, val: 0, step: 0};
    $(window).scroll(function () {
        a.height = i.height(), a.top = i.offset().top, n.val = $(this).scrollTop(), n.step = n.val - n.last, n.step < 0 ? o() : t(), n.last = n.val
    })
};

Шапка сайта "плавно" скрывается при прокрутке страницы вниз и появляется при прокрутке вверх.

Использовать очень просто:

$('header').flyHead();

Example: https://jsfiddle.net/Helldar/9m7xupz1/10/