Sticky header slide into fixed position from top

Question

I've set up my sticky header to pop into the top fixed position but i want it animated so it slides from the top off screen down to the current top 0 position when scrolled.

I tried adding the transition css but it seems to slide up into position due to the "normal" header not being at the same position to start off with. It has a margin added to the top so i guess that's why the animation is showing it slide up into top 0 position.

$(window).scroll(function () {
    if( $(window).scrollTop() > $('.header').offset().top + 300 && !($('.header').hasClass('stickyheader'))){
    $('.header').addClass('stickyheader');
    } else if ($(window).scrollTop() == 0){
    $('.header').removeClass('stickyheader');
    }
});

http://jsfiddle.net/jc0807/euyLvesr/4/

Thanks

Answer 1

just animate the transition with jquery:

JS:

$(window).scroll(function () {
  if( $(window).scrollTop() > $('.header').offset().top + 300 && !($('.header').hasClass('stickyheader'))){
    $('.header').addClass('stickyheader').animate({"top":"0%"});
  } else if ($(window).scrollTop() == 0){
    $('.header').removeClass('stickyheader');
  }
});

CS:

.stickyheader{
   ...
   top: -100%;
   ...
}

JSFIDDLE

Increased slide time:

UPDATED FIDDLE

Fixed slide down after scrolling back up

NEW FIDDLE