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

Sticky Footer Always at Bottom of Screen (Not Webpage)

本文关键字：屏幕 网页 底部 于屏幕      更新时间：2023-09-26

我使用Chris Coyier的粘性页脚示例向我的网页添加页脚。效果很好！

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

例如，当它第一次加载时，它会停留在我的屏幕页脚上 - 但是当我开始向下滚动时，它会自行调整并将自己锁定在页面底部。

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

我尝试调整 emample 的最后 2 行：

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

但不要走得太远...

希望这对你有用 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)

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

 position: "static"

跟：

 position: "fixed"
相关文章：