sticky header with animation

_sticky_header.scss

$transition-duration: .3s !default;
$transition-timing-function: ease !default;
$sticky-limit: 80px;

.sticky {
    @include transition-duration($transition-duration);
    @include transition-property(top);
    @include transition-timing-function($transition-timing-function);
    position: fixed;
    top: -$sticky-limit;
    left: 0;
    right: 0;
}

.sticky-top {
    top: 0;
}

sticky.js

var stickyTimeout = false;
// check if scrollTop > limit and if so stick header to top
function stickHeader() {
    var scrollTop = $(window).scrollTop(),
        $header = $('.ultimate-header'),
        limit = $('.ultimate-header').hasClass('sticky-top') ? 0 : $('.navbar-nav').height();

    if(scrollTop > limit) {
        if(!stickyTimeout){
            $header.addClass('sticky');
            stickyTimeout = window.setTimeout(function() {
                $header.addClass('sticky-top');
            }, 300);
        }
    } else {
        if(stickyTimeout) window.clearTimeout(stickyTimeout);
        stickyTimeout=false;
        $header.removeClass('sticky-top');
        $header.removeClass('sticky');
    }
}

stickHeader();

// check on window scroll
$(window).off('scroll').scroll(function() {
    stickHeader();
});