как сделать появление плавно блока при прокрутке вверх?jQuery

Для достижения этого эффекта можно использовать CSS переходы (так это реализовано на указанном Вами ресурсе), либо воспользоваться средствами анимации jQuery. Также необходимо создать обработчик события прокрутки страницы. Блок с заголовком фиксируем (position: fixed).

CSS

body {
    height: 2000px /* чтобы было, что прокручивать */
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: black;
    color: white;
    transition: transform 0.5s cubic-bezier(0.8, 0.2, 0.2, 0.8);
}

.hidden-header {
    transform: translateY(-100%);
}

HTML

<div id="header">Header</div>

Javascript

var headerVisible = true;
var scrollPos = $(document).scrollTop();

$(window).scroll(function() {
    var scrollTop = $(document).scrollTop();
    
    if(headerVisible && scrollTop > scrollPos)
    {
        headerVisible = false;
        $("#header").addClass('hidden-header');
    }
    else if(!headerVisible && scrollTop < scrollPos)
    {
        headerVisible = true;
        $("#header").removeClass('hidden-header');
    }
    
    scrollPos = scrollTop;
}); 

Можно добавить задержку при помощи таймера.

https://jsfiddle.net/0utabnx7/