Question

我想更改标题的高度，并在滚动条上添加一个类。但是我想使用jQuery animate（或类似效果）顺利完成。我们的想法是在滚动条上粘贴标题，并在粘贴形式时从中删除子标题。这就是我在滚动时淡出子标题的原因。有没有更好的方法呢？

我已经设法使用以下代码执行此操作，但是如果您看到该演示，则css更改并不顺利，它会以某种方式生涩。

演示：

以下是代码：

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

jQuery在滚动时顺利更改css属性

3 个答案: