JQuery替代.animate？

Question

我有一個JQuery腳本來保持我的頁腳始終在瀏覽器的底部，不管是什麼。

問題是，它使用「動畫」強制它向下或向上移動，每次頁面加載時顯示頁腳從頂部滾動到底部。就像一個飛行腳註欄。

我想知道是否有「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

我想通了。我需要將「.animate」的延遲指定爲「0」。以下是更新的代碼。

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

Answer 2

你可以簡單地把頁腳在固定的位置在屏幕的底部 -

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

Answer 3

如果你不需要動畫這樣下去對CSS的解決方案。正如@lix所述。

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

在另一方面，在具有動畫的情況下，有兩種方法：

1. JS溶液

2. CSS3過渡propertiy。

   #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; 
   }