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

尝试使用对fadeOut（）调用的回调。 小提琴： 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');
  }
});