javascript - 粘性页脚始终位于屏幕底部（不是网页）

Question

我使用Chris Coyier 的 Sticky Footer 示例为我的网页添加页脚。效果很好！

但是，我想知道如何调整代码，使页脚位于屏幕底部——而不是网页。

因此，例如，当它第一次加载时，它位于我的屏幕底部 - 但是当我开始向下滚动时，它会自行调整并将自身锁定在页面底部。

如何将其保留在屏幕底部？

我尝试调整示例的最后两行：

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

但不要走得太远...

Answer 1

希望这对你有用 http://jsfiddle.net/8YWHn/

的CSS

.fixed {
  position:fixed;
    bottom:0px;
    -webkit-backface-visibility:hidden;  

}

js

 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()) {
                       $footer.css({
                            position: "absolute"
                       }).animate({
                            top: footerTop
                       })
                   } else {
                       $footer.addClass('fixed');
                   }

           }

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

Answer 2

另一种对我有用的方法是简单地替换 javascript 中的行：

 position: "static"

和：

 position: "fixed"