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

【问题标题】：Sticky Footer Always at Bottom of Screen (Not Webpage)粘性页脚始终位于屏幕底部（不是网页）
【发布时间】：2013-10-11 03:22:46
【问题描述】：

我正在使用Chris Coyier's Sticky Footer example 为我的网页添加页脚。效果很好！

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

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

我怎样才能把它放在屏幕底部？

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

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

但不要走得太远......

【问题讨论】：

查看我的答案stackoverflow.com/a/19254147/1548301
我想我对你的意思感到困惑 - 粘性页脚通常用于您无法滚动但您希望某些内容适合窗口底部的页面 - 您在寻找像这样jsfiddle.net/8YWHn
@JamesDaly 这正是我想要的！请把你的css和js——或者只是这个jfiddle——放在一个答案中，以便我接受。 js中的css .fixed和edited else语句做到了。谢谢！

标签： javascript jquery

【解决方案1】：

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

CSS

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

}

 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)

【讨论】：

【解决方案2】：

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

 position: "static"

与：

 position: "fixed"

【讨论】：