jquery 带有回调函数的动画在滚动时不起作用

Question

下面是我使用 jquery animation 和回调函数的部分代码。

我想在一段时间后用 top:-141px 为 header 设置动画，这应该设置为 top:-63px.

$(window).scroll(function() {
   if ($(this).scrollTop() > 1){  

   $("#header").animate({
      position: 'fixed',
      top: '-141px',
    },function(){
      $(this).animate({
        position: 'fixed',
        top: '-63px',
      })
    });
  }
});

*{
  margin:0;
  padding:0
}

#header{
  height:141px;
  background:#333;
  color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<header id="header">
  Header section
</header>

<div>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

Answer 1

动画方式不支持像position那样的属性，所以用css设置

$(window).scroll(function() {
  if ($(this).scrollTop() > 1) {

    $("#header").stop(true).css({
      position: 'fixed'
    }).animate({
      top: '-141px',
    }, function() {
      $(this).animate({
        top: '-63px',
      })
    });
  }
});

* {
  margin: 0;
  padding: 0
}
#header {
  height: 141px;
  background: #333;
  color: #fff;
}
div {
  height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<header id="header">
  Header section
</header>

<div>
</div>

jquery 带有回调函数的动画在滚动时不起作用

jquery animation with call back function not working on scroll

jquery

css

animation

jquery-callback