jQuery粘贴页脚-CSDN博客

通常， CSS粘性页脚是最好的选择，因为它可以完美流畅地运行并且不需要JavaScript。如果根本无法进行所需的标记，则可以选择使用jQuery JavaScript。

HTML

只要确保#footer是页面上最后可见的内容即可。

<div id="footer">
    Sticky Footer
</div>

CSS

设定高度是最简单的方法。

#footer { height: 100px; }

jQuery的

加载窗口以及滚动或调整窗口大小时，将测试页面内容是否短于窗口的高度。如果是这样，则意味着在窗口结束之前，内容下方有空白，因此页脚应重新放置在窗口底部。如果不是，则页脚可以保留其正常的静态位置。

// Window load event used just in case window height is dependant upon images
$(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()) {
                   $footer.css({
                        position: "absolute"
                   }).animate({
                        top: footerTop
                   })
               } else {
                   $footer.css({
                        position: "static"
                   })
               }
               
       }

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