スクロールスムーズにスティッキーヘッダーのWordpressで動作していません

Question

私はゆっくりとスムーズに私のヘッダーをスクロールしようとしていますが、すぐに表示されます。

これは私のheaderとこれはwhat I wantです。

//Sticky menu after get riched bottom of the viewport 
$(window).scroll(function() { 
    var elementOffset = $(window).scrollTop(); 
    var viewportHeight = $(window).height(); 
    var elementHeight = $('#header').height(); 
    if (viewportHeight < elementOffset) { 
     $('#header').addClass('header-sticky'); 
    } else if (elementOffset < $('#header').height()) { 
     $('#header').removeClass('header-sticky'); 
    } 
}); 

Answer 1

.header-sticky{ 
transition : .5 ease top; 
animation:slide-down 5s; 
animation-delay:3s; 
}