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'); 
    } 
});