Javascript 关于在添加和删除两个类之间添加动画的问题

请看一下这个演示，让我知道为什么我不能在添加和删除两个类

fixed top

和

fixed bottom

之间生成平滑过渡（类似平滑滚动）

  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;

var lastScrollTop=0；
$（窗口）。滚动（功能（事件）{
var st=$（this.scrollTop（）；
如果（st>lastScrollTop）{
如果（st>500）{
$（'.box'）.removeClass（“固定底部”）.addClass（“固定顶部”）；
}
}否则{
如果（st<500）{
$（'.box'）.removeClass（“固定顶部”）.addClass（“固定底部”）；
}
}
lastScrollTop=st；
});
html，
身体{
身高：100%；
}
.集装箱{
高度：2000px；
}
.盒子{
宽度：100%；
高度：50px；
背景：#777；
}
.固定顶{
位置：固定；
排名：0；
-webkit过渡：所有3s轻松；
-moz转换：所有3s轻松；
-o-过渡：所有3s容易；
过渡：所有3s轻松；
}
.固定底部{
位置：固定；
底部：0；
-webkit过渡：所有3s轻松；
-moz转换：所有3s轻松；
-o-过渡：所有3s容易；
过渡：所有3s轻松；
}
由于您没有在
中设置“底部”。在
中设置“固定顶部”
和在
中设置“顶部”。在
中设置“固定底部”
的值，因此条带会上下跳跃，这样，transition prosessor就无法实现要转换的哪个属性。您需要获取window.height（）才能正确过渡。您可以使用jquery来完成，这会使您的css更短
看看这个片段


var lastScrollTop=0；
变量y=$（窗口）.height（）-$（'.box'）.height（）+“px”；
$（'.box'）.css（“顶部”，y）；
$（窗口）。滚动（功能（事件）{
var st=$（this.scrollTop（）；
如果（st>lastScrollTop）{
如果（st>500）{
$（'.box'）.css（“底部”，y）；
$（'.box'）.css（“顶部”，“0”）；
}
}否则{
如果（st<500）{
$（'.box'）.css（“顶部”，y）；
$（'.box'）.css（“底部”，“0”）；
}
}
lastScrollTop=st；
});
html，
身体{
身高：100%；
}
.集装箱{
高度：2000px；
}
.盒子{
宽度：100%；
高度：50px；
位置：固定；
底部：0；
背景：#777；
-webkit过渡：所有3s轻松；
-moz转换：所有3s轻松；
-o-过渡：所有3s容易；
过渡：所有3s轻松；
}
非常感谢Banzay