2

无论如何，我有一个 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)

});

4

3 回答 3

4

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

#footer { position:fixed; bottom:0px }
于 2012-06-07T21:08:15.443 回答
0

如果您不需要动画，请选择 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;
}
于 2012-06-07T21:19:46.407 回答
0

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

  if ( ($(document.body).height()+footerHeight) < $(window).height() + 150) {
               $footer.css({
                    position: "absolute"
               }).stop().animate({
                    top: footerTop
               }, 0)
           } else {
               $footer.css({
                    position: "static"
               })
           }
于 2012-06-07T21:47:24.923 回答