Липкий заголовок слайда в фиксированное положение сверху

Question

Я установил свой липкий заголовок, чтобы поместить его в верхнюю фиксированную позицию, но я хочу, чтобы он был анимированным, поэтому он скользит с экрана сверху вниз до текущей верхней позиции 0 при прокрутке.

Я попытался добавить переход css, но он, кажется, скользит в нужное положение из-за того, что «нормальный» заголовок не находится в том же положении, с которого можно начать. У этого есть запас, добавленный к вершине, таким образом, я думаю, именно поэтому анимация показывает, что она сдвигается в верхнюю позицию 0.

$(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/

Благодаря

Answer 1

просто анимировать переход с 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

Увеличения время слайда:

UPDATED FIDDLE

Fixed скользит вниз после прокрутки назад вверх

NEW FIDDLE