JQuery替代.animate？

Question

我有一个JQuery脚本，无论如何都能让我的页脚始终位于浏览器的底部。

问题是它使用“Animate”强制它向下或向上移动，这表示每次页面加载时页脚从顶部滚动到底部。就像一个飞行的页脚吧。

我想知道是否有一个来自“Animate”的替代品，只是强制它显示在底部，现在滚动效果显示它拖下来了？

这里的代码片段，“.animate”是我需要的另一种选择。

 $(window).bind("load", function() { 

   var footerHeight = 0,
       footerTop = 0,
       $footer = $("#Footer");

   positionFooter();

   function positionFooter() {

            footerHeight = $footer.height();
            footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";


           if ( ($(document.body).height()+footerHeight) < $(window).height() + 150) {
               $footer.css({
                    position: "absolute"
               }).stop().animate({
                    top: footerTop
               })
           } else {
               $footer.css({
                    position: "static"
               })
           }

   }

   $(window)
           .scroll(positionFooter)
           .resize(positionFooter)

}）;

Answer 1

您可以简单地将页脚放在屏幕底部的固定位置 -

#footer { position:fixed; bottom:0px }

Answer 2

如果您不需要动画，那么请选择CSS解决方案。正如@lix提到的那样。

#footer { position:fixed; bottom:0px }

另一方面，如果有动画，有两种方法：

1. JS解决方案

2. CSS3过渡特性。

   #footer { 
      position: fixed;
      bottom: 0px;
   
      -webkit-transition: 3s linear 1s;
      -moz-transition: 3s linear 15s;
      -o-transition: 3s linear 1s;
      -ms-transition: 3s linear 1s;
      transition: 3s linear 1s;
   }
   

Answer 3

我明白了。我需要将“.animate”的延迟指定为“0”。以下是更新后的代码。

  if ( ($(document.body).height()+footerHeight) < $(window).height() + 150) {
               $footer.css({
                    position: "absolute"
               }).stop().animate({
                    top: footerTop
               }, 0)
           } else {
               $footer.css({
                    position: "static"
               })
           }