添加和删​​除两个类之间添加动画的问题

你能不能看看这个演示，让我知道为什么我无法在添加和删除fixed-top和fixed-bottom两个类之间生成平滑过渡（类似Smooth Scroll），而我已经在其中添加了以下css角色？

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

 var lastScrollTop = 0; $(window).scroll(function(event) { var st = $(this).scrollTop(); if (st > lastScrollTop) { if (st > 500) { $('.box').removeClass("fixed-bottom").addClass("fixed-top"); } } else { if (st < 500) { $('.box').removeClass("fixed-top").addClass("fixed-bottom"); } } lastScrollTop = st; }); 

 html, body { height: 100%; } .container { height: 2000px; } .box { width: 100%; height: 50px; background: #777; } .fixed-top { position: fixed; top: 0; -webkit-transition: all 3s ease; -moz-transition: all 3s ease; -o-transition: all 3s ease; transition: all 3s ease; } .fixed-bottom { position: fixed; bottom: 0; -webkit-transition: all 3s ease; -moz-transition: all 3s ease; -o-transition: all 3s ease; transition: all 3s ease; } 

你能不能让我知道最好的方法是什么（顺利上下移动）？

Answer 1

一个条.fixed-top下跳跃，因为你没有在.fixed-top和.fixed-top bottom内设置.fixed-top和top .fixed-bottom ，然后转换prosessor无法实现转换的属性。 你需要让window.height（）正确转换。 你可以使用jquery来实现它，这会使你的css更短看看代码片段

 var lastScrollTop = 0; var y = $( window ).height() - $('.box').height() + "px"; $('.box').css("top", y); $(window).scroll(function(event) { var st = $(this).scrollTop(); if (st > lastScrollTop) { if (st > 500) { $('.box').css("bottom", y); $('.box').css("top","0"); } } else { if (st < 500) { $('.box').css("top", y); $('.box').css("bottom","0"); } } lastScrollTop = st; }); 

 html, body { height: 100%; } .container { height: 2000px; } .box { width: 100%; height: 50px; position: fixed; bottom: 0; background: #777; -webkit-transition: all 3s ease; -moz-transition: all 3s ease; -o-transition: all 3s ease; transition: all 3s ease; }