jQuery изменение свойств css плавно на прокрутке

Question

Я хочу изменить высоту заголовка и добавить к нему класс в свитке. Однако я хочу сделать это плавно, используя анимацию jQuery (или аналогичный эффект). Идея состоит в том, чтобы заголовок был липким на прокрутке и удалял подзаголовок из него, когда он в липкой форме. Вот почему я исчезаю подзаголовок, когда он прокручивается. Есть ли лучший способ сделать это?

Мне удалось сделать это с помощью следующего кода, однако, если вы видите демо, изменения css не являются гладкими, это как-то отрывисто.

Демо:

http://jsfiddle.net/kcW9a/

Вот код:

var height = $('header').outerHeight(); 

$(window).scroll(function() { 
    if($(this).scrollTop() > height) 
     { 
      $("header .subheader").fadeOut(200); 
      $('header').addClass('stick'); 
      $('header').stop().animate({'height' : '50'}, 200); 

     }else if($(this).scrollTop() <= height) 
     { 
      $('header').removeClass('stick'); 
      $("header .subheader").fadeIn(200); 
      $('header').stop().animate({'height' : '100'}, 200); 
     } 
}); 
$(window).scroll(); 

Answer 1

Изменить стиль CSS для фиксированной головкой с липким головы эффект

header{ 
    height: 100px; 
    background: green; 
    position:fixed; 
    width:100%; 
} 

Answer 2

Попробуйте использовать функцию обратного вызова к угасанию Out(). Фидл: http://jsfiddle.net/myTerminal/kcW9a/1/

fadeOut(200, function() { $('header').addClass('stick'); }); 

Answer 3

$(window).scroll(function() { 
    if($('#main').offset().top === 0) { 
    $('.subheader').fadeIn(600); 
    $('#main').stop().animate({ height: '100px' }, 300).removeClass('stick'); 
    } 
    else { 
    $('.subheader').fadeOut(1); 
    $('#main').stop().animate({ height: '50px' }, 300).addClass('stick'); 
    } 
});