Fade in / Ease down sticky header

Question

A client of mine is using a sticky header that kicks in after a certain distance has been scrolled.

They now want the header to fade in and slide down into position as oppose to just "appearing" as it does now.

jQuery isn't my strong suit so any help would be great.

Here is the URL in question and here is the current jQuery used for the sticky header;

$(window).scroll(function() {

    var headerheight = $("header").height();
    var header = $(document).scrollTop();

    if (header > height-75 ) {
        $('header').addClass('sticky');
        $('body').css("padding-top", headerheight);
        $('.sticky').css('top', 0);
    } else {
        $('header').removeClass('sticky');
        $('body').css("padding-top", 0);
        $('header').css('top', 25);
    }

});

Answer 1

If the below fix doesn't just drop in, the concept solves your issue and future instances where 'easing' is needed. We'll disappear the element and cause it to reappear gracefully.

Specifically, before addClass('sticky') do: $('header').hide() and after you did all your aesthetic magic to it, do $('header').fadeIn('fast') ... then undue that for your scroll-back case.

Sample:

$(window).scroll(function() {
    var headerheight = $("header").height();
    var header = $(document).scrollTop();

    if (header > height-75 ) {
        $('header').hide();
        $('header').addClass('sticky');
        $('body').css("padding-top", headerheight);
        $('.sticky').css('top', 0);
        $('header').fadeIn('fast');
    } else {
        $('header').fadeOut('fast');
        $('header').removeClass('sticky');
        $('body').css("padding-top", 0);
        $('header').css('top', 25);
        $('header').fadeIn('fast');
    }
});

That will on the one hand be quick, but on the other hand be elegant and feel fluid. Otherwise, great looking design.