Question

我正在使用Chris Coyier's Sticky Footer example在我的网页上添加页脚。它很棒！

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

例如，当它首次加载屏幕的页脚时 - 但是当我开始向下滚动时，它会调整自身并将其自身锁定在页面底部。

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

我已经尝试调整了这个emample的最后两行：

 $(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"

粘滞页脚始终位于屏幕底部（非网页）

2 个答案: