jQuery在滾動時順利地更改css屬性

Question

我想更改標題的高度並在滾動中爲其添加類。不過，我想用jQuery animate（或類似的效果）順利地做到這一點。 這個想法是使標題粘在滾動條上，並在粘貼形式時從其中刪除子標題。這就是爲什麼當它正在滾動時淡入subheader。有沒有更好的方法來做到這一點？

我已經設法用下面的代碼來做到這一點，但是如果你看到演示，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'); 
    } 
});